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...
<img src="photo.jpg" class="photo_img" width="320" height="240">
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...
padding-top: 75%; /* 4:3 aspect */
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.