Multiple photos with the same dimensions - html

Question

I would like to build a website for an exhibition but i don't really know how to make multiple photos have the same dimension without losing the quality.
For example look at this guy's website: https://www.peterdraws.com/shop/. I want my photos to look like here.
Here is my html:
<div class="work">
<a href="#"><div class="boxx"><div class="box" style="background:
url('img.jpg') no-repeat center center ;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;">
</div></div></a>
<a href="#"><div class="boxx"><div class="box" style="background:
url('img1.jpg') no-repeat center center ;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;">
</div></div></a>
</div>
And here is the css:
.work {
width: 75%;
margin: 0 auto;
text-align: center;
padding: 40px 0 70px 0;
}
.work .boxx {
width: 350px;
height: 400px;
display: table-cell;
vertical-align: middle;
}
.work .boxx .box {
margin: 0 auto;
width: 300px;
height: 300px;
}

Answer 1

If you want to make images of different dimension look like they are the same dimension, try using cover for background-size instead of contain:
<div class="work">
<a href="#">
<div class="boxx">
<div class="box" style="background: url('img.jpg') no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;"></div>
</div>
</a>
<a href="#">
<div class="boxx">
<div class="box" style="background: url('img1.jpg') no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;"></div>
</div>
</a>
</div>
This of course means that parts of the images have to be cut off (just like on the example website you provided). To control which parts are visible, look into what values the background-position CSS property accepts.
For more information on background-size and background-position:
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
https://developer.mozilla.org/en-US/docs/Web/CSS/background-position