Scale and center image in each div in this container - html

Question

I have this in HTML and i need the pictures inside the containers to be centered and to scale even if i resize the parent div
<div class="art-cont" id="art">
<div class="art-1">
<img src="https://cdn.stocksnap.io/img-thumbs/960w/2SQMYBPQGK.jpg">
</div>
<div class="art-2">
<img src="https://cdn.stocksnap.io/img-thumbs/960w/2SQMYBPQGK.jpg">
</div>
<div class="art-3">
<img src="https://cdn.stocksnap.io/img-thumbs/960w/2SQMYBPQGK.jpg">
</div>
</div>
CSS:
.art-cont{
width:100%;
height:400px;
}
.art-1{
width:70%;
height:50%;
float:left;
position:relative;
overflow:hidden;
border:2px solid #fff;
}
.art-2{
width:30%;
height:50%;
float:left;
position:relative;
overflow:hidden;
border:2px solid #fff;
}
.art-3{
width:100%;
height:50%;
clear:both;
position:relative;
overflow:hidden;
border:2px solid #fff;
}
Here's a fiddle: https://jsfiddle.net/0r7rhe77/

Answer 1

The following rule will do it
.art-cont img {
width: 100%;
height: 100%;
object-fit: cover;
}
as long as you're okay with the browser compatibility of object-fit (roughly 90% of users - most everybody except IE 11 or lower). Also check out the other options for object-fit.
Fiddle
Another option is refactoring your code to display the images using background-image, as all modern browsers support background-size. Remove the <img> elements and instead do:
.art-1, .art-2, .art-3 {
background-image: url(https://cdn.stocksnap.io/img-thumbs/960w/2SQMYBPQGK.jpg);
background-size: cover;
background-position: center center;
}
Fiddle using this approach