Make image in picture element fit its container

Question

I have the following code:

#container {
  background: steelblue;
  width: 333px;
  height: 333px;
}

picture img {
  object-fit: cover;
}

<div id="container">
  <picture>
    <img src="http://placekitten.com/g/300/300" alt="kitten">
  </picture>
</div>

How can I get the picture to fill the container box?

Here's a codepen.

Answer 1

You have to use display:flex in 'picture' element (in conjunction with object-fit property for the 'img')

This will work, for any size of the container.

like so:

#container {
  background: steelblue;
  width: 333px;
  height: 500px;
  
}
picture {
  width: 100%;
  height: 100%;
  display: flex;
 
}
picture img {
 object-fit: cover; 
    height: auto;
    width:100%;
}

<div id="container">
  <picture>
    <img src="http://placekitten.com/g/300/300" alt="kitten">    
  </picture>
</div>