Make image in picture element fit its container
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>Just add a width: 100%; to your img. It will fit to the container if both are squares.