Creating a resizable constant ratio DIV with CSS

As I work away on my travelblog.ws project I encounter some interesting problems and creating a constant ratio DIV has been one of them. What I wanted to do was have photos that I uploaded, no matter whether they are landscape or portrait oriented to be displayed in a uniform manner, all with the same sizes, exactly how Facebook does it. This is my solution to that.

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>

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