I would like to take an aleatory image and having it scale up / down to use the whole space of the parent div, while maintaining its original proportions. I expect the image to be cropped (it's ok, as long it's centered both vertically and horizontally).
I've tried this code:
<div class="container" style="width: 800px">
<div class="row">
<div style="
height:340px;
width: 100%;
overflow: hidden;
border: 3px solid red;
">
<img src="http://via.placeholder.com/500x500" style="
object-position: center;
object-fit: cover;
">
</div>
</div>
</div>And here's the result:
Why isn't it scaling up, centering and cropping the image?