Presenting Images In A Specific Aspect Ratio With CSS

In this 2 minute tutorial we’ll learn how to use CSS to present images in a predefined aspect ratio. Useful for when you want to show images with various dimensions in (for example) a square box without skewing them.

If you want to actually modify the image data, for example when you need to make sure images uploaded by visitors all adhere to a square aspect ratio, you can visit this tutorial on cropping images to an aspect ratio with JavaScript.

Fixed Size Images

If we need to show an image in a fixed size we can set the size using the width and height attributes. Now if we don’t know the dimensions and the aspect ratio of the image that will be shown here we can use object-fit to make sure that the image is never “skewed”.

<img width="200" height="200" src="/path/to/image.jpeg" alt="" />

img {
    object-fit: cover;
}

See the resulting image below. Note that the source image used is in landscape format and doesn’t get skewed but is “cropped” in the center.

The object-fit property accepts fill, contain, cover, none, and scale-down, the Object fit properties are described perfectly on MDN.

Flexible Size Images

To forces images that scale with their parent containers to a specific aspect ratio we have to create an element around the image. The image wrapper makes sure it always fits a certain aspect ratio, we’ll then tell the image element to fit the size of the wrapper element.

<div class="aspect-ratio-box">
    <img src="/media/desk.jpg" alt="" />
</div>

/* Position child elements relative to this element */
.aspect-ratio-box {
    position: relative;
}

/* Create a pseudo element that uses padding-bottom to take up space */
.aspect-ratio-box::after {
    display: block;
    content: '';
    /* 16:9 aspect ratio */
    padding-bottom: 56.25%;
}

/* Image is positioned absolutely relative to the parent element */
.aspect-ratio-box img {
    /* Image should match parent box size */
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

The result, a flexible box that adheres to a 16:9 aspect ratio.

The padding-bottom value is a percentage of the width of the container. If the container is 400 pixels wide, the resulting height will be 56.25% of 400 equals 225.

To know what padding-bottom value to use for each aspect ratio we can divide the height by the width.

Let’s look at the 16:9 aspect ratio.

9 / 16 = .5625

We need a percentage, so we multiply by 100

.5625 * 100 = 56.25

That’s it!

Future

In the near future it’ll be possible to use the CSS aspect-ratio property instead of the padding-bottom trick. At the moment browser support is still lacking.

Conclusion

We’ve learned how to present images in different aspect ratios without skewing them. Having tools to work with fixed and flexible containers should cover most use-cases you’ll encounter.