Why doesn't object-fit affect width or height? - html

Question

I have a 240*240px image inside a 100*300px div (demo values, actual values vary and are unknown). I use object-fit: contain to make the image completely visible inside the div and also keep it's aspect ratio. The problem is that object-fit isn't modifying the width of the image, resulting in a weird "padding" (so to say).
How can I make the image take only as much width as required, 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 normally works together 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 too 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>