Neden nesne sığdırma genişliğini veya yüksekliğini etkilemiyor?

Question

100 * 300px div içinde 240 * 240px görüntü var (demo değerleri, gerçek değerler değişiyor ve bilinmiyor). Görüntüyü div içinde tamamen görünür yapmak ve ayrıca en boy oranını korumak için object-fit: contain kullanıyorum. Sorun, object-fit'un görüntünün genişliğini değiştirmemesidir, bu da garip bir "dolgu" ile sonuçlanır (yani).

nasıl görüntü yerine orijinal genişliğini alma, gerektiği gibi sadece kadar genişliğini sürmesine sebep olabilir? object-fit özellik normal width ile birlikte çalışır http://codepen.io/alexandernst/pen/ONvqzN

.wrapper { 
 
    height: 100px; 
 
    width: 300px; 
 
    border: 1px solid black; 
 
} 
 
.flex { 
 
    display: flex; 
 
} 
 
img { 
 
    object-fit: contain; 
 
}

<div class="flex wrapper"> 
 
    <img src="https://unsplash.it/240/240" /> 
 
</div>

Answer 1

.wrapper { 
 
    height: auto; 
 
    width: 100%; 
 
    border: 1px solid black; 
 
    background-image: url(https://unsplash.it/240/240); 
 
    background-size: contain; 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
} 
 

 
.flex { 
 
    display: flex; 
 
} 
 

 
img { 
 
    object-fit: contain; 
 
}

<div class="flex wrapper"> 
 
    <img src="https://unsplash.it/240/240" /> 
 
</div>

Answer 2

, height, max-width a: Deneme

ve max-height. Örnek:

.wrapper { 
 
    height: 100px; 
 
    width: 300px; 
 
    border: 1px solid black; 
 
} 
 
.flex { 
 
    display: flex; 
 
} 
 
img { 
 
    object-fit: contain; 
 
    height: 100%; 
 
    width: auto; 
 
}

<div class="flex wrapper"> 
 
    <img src="https://unsplash.it/240/240" /> 
 
</div>

Aslında, bu çok bile object-fit olmadan çalışıyor, bu jsFiddle bakın.