オブジェクトフィットが幅や高さに影響するのはなぜですか？

Question

100 * 300px div内に240 * 240pxの画像があります（デモ値、実際の値は異なり、不明です）。私はobject-fit: containを使って画像をdiv内で完全に見えるようにし、アスペクト比も保持します。問題は、object-fitが画像の幅を変更していないことです。その結果、奇妙な「パディング」が発生します。

どのように私は必要に応じて、画像ではなく、元の幅を取るの、唯一の同じくらいの幅を取ることができますか？ object-fitプロパティは、通常widthと連携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：デモ

nd max-height。例：

.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>

実際には、それはあまりにも、object-fitせずに正常に動作し、このjsFiddleを参照してください。