Why doesn't object snap affect width or height?

Question

I have a 240 * 240px image inside a div with a size of 100 * 300 pixels (demo values, actual values ​​vary and are unknown). I use object-fit: contain to make the image fully visible inside the div, as well as preserve its aspect ratio. The problem is that object-fit does not change the width of the image, which leads to a strange "filling" (so to speak).

How can I make an image take up as much width as needed, instead of taking the original width?

Demo: 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

The object-fit property usually works along with width , height , max-width and max-height . Example:

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

In fact, it works fine even without object-fit , see this jsFiddle .

Answer 2

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