I am in the process of creating a website for an exhibition but I am struggling with maintaining consistent dimensions for multiple photos without sacrificing quality. For reference, I would like my images to resemble those on this particular website: .
Below is the HTML code I have been using:
<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 corresponding 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;
}