To demonstrate my code I have uploaded 3 photos, two portrait and one landscape...
When displayed, the results look like this...
Each of the photos is placed into a DIV with a structure like this...
HTML
<div class="photo-4x3">
<div class="photo_clip">
<img src="photo.jpg" class="photo_img" width="320" height="240">
</div>
</div>
Note in this case I am using a 4:3 ratio div to clip the photo. In addition the photo is both vertically and horizontally centred within the clipping DIV.
Applying a bit of CSS gets the desired result...
CSS
.photo-4x3 {
display: inline-block;
position: relative;
width: 320px;
}
.photo-4x3:after {
padding-top: 75%; /* 4:3 aspect */
display: block;
content: '';
}
.photo_clip {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
background-color: #999;
overflow-x: hidden;
overflow-y: hidden;
text-align: center;
}
.photo_img {
width:100%;
height:auto;
top:50%;
transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
left:0;
position:absolute;
}
The size of the resulting DIV is controlled by setting the width on the photo-4x3 class. The ratio is set by the padding-top value on the photo-4x3:after selector. For example 75% means 4:3 ratio (3 ÷ 4 × 100). Using the same calculation a 16:9 aspect ratio is a 56.25% value.
I've put a full example HTML file here.
-i
