Contact!

Change the aspect ratio of an image using CSS

Change the aspect ratio of an image using CSS

It is a common request for developers to change the aspect ratio of an image using CSS. It therefore wasn’t new to me when I got asked to do just that a couple of days ago.

Simply, the aspect ratio is a ratio of width to height. We can relate this to a lot of elements such as images, videos, screen sizes and containers. This allows us to use ratios and proportions to control the look and size of our layouts and interfaces. It is a very important concept when considering responsive designs.

Common aspect ratios include 1:1, 3:2, 4:3 and 16:9.

As of 2021, cumulative layout shift is part of the core web vitals and has become a Google ranking factor. Setting aspect ratios can be used to prevent shifts caused by loading media, which is super important.

Aspect ratio using the ‘padding top hack’

The ‘padding top hack’ is the method I’ve always used for changing aspect ratio. The premise is that we use a parent container with top or bottom padding to adjust the aspect ratio.

To find the correct percentage of padding to apply, we divide the larger number by the smaller number and multiply by 100:

1:1 = 1 / 1 * 100 = 100%
3:2 = 2 / 3 * 100 = 66.66%
4:3 = 3 / 4 * 100 = 75%
16:9 = 9 / 16 * 100 = 56.25%

For a 16:9 aspect ratio we use ‘9 / 16 * 100’, which gives us a padding of 56.25%.

<picture>
    <img src="image.jpg" alt="Aspect ratio image">
</picture>
picture {
    display: block;
    position: relative;
    padding-top: 56.25%;
}

img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

Obviously, as we are manipulating the aspect ratio of the image we are going to lose detail and/or definition. We can alleviate this by using ‘object-fit’ to set how the image is going to resize to the container. We can also use ‘object-position’ to specify the alignment of the content.

img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;

    object-fit: cover;
    object-position: left;
}

Here is a fiddle to see the approach in action.

Aspect ratio using the CSS property

Depending on browser targets, I recommend the use of the CSS ‘aspect-ratio’ property. This simplifies setting an aspect ratio into something really intuitive, and no longer feels like a ‘hack’. As you can see, there is considerably less overhead when using this property compared to the ‘padding top hack’.

img {
    aspect-ratio: 16/9;
    width: 100%;
}

Again, we can tidy up any aspect ratio stretching with ‘object-fit’ and ‘object-position’.

img {
    aspect-ratio: 16/9;
    width: 100%;

    object-fit: cover;
    object-position: left;
}

Here is another fiddle.

Should you change the aspect ratio of an image?

Setting the aspect ratio of an image is good practice because it prevents cumulative layout shift. It is a really nice weapon to have to preserve designs, whatever a client might throw at it.

Having said that, I would highly encourage image optimisation because this optimises the payload of our website/application and ensures there is no definition and detail loss on the images.

Tip: If you’re using WordPress then have a look at creating custom image sizes and regenerating WordPress media.

  1. David says:

    Nice clear article! Thanks

  2. kelvin says:

    Worked on first attempt. Thanks

Join the discussion!

You might like:

Create, register and use shortcodes in WordPress

Create, register and use shortcodes in WordPress

by Gav 18/03/2023

Learn how to create and register your own WordPress shortcodes to add dynamic content to your posts and pages.

How to use guard clauses in JavaScript

How to/why use guard clauses in JavaScript

by Gav 16/03/2023

Learn how to improve code readability and performance by using guard clauses in JavaScript. Discover their benefits and best practices.

Implements and Extends, Object Oriented TypeScript

Implements and Extends, Object Oriented TypeScript

by Gav 15/03/2023

Learn the difference between implements and extends in TypeScript. Use Implements to implement interfaces and types, and extends to inherit from classes.

Reading/Parsing and Writing YAML files in PHP, Symfony

Reading/Parsing and Writing YAML files, PHP Symfony

by Gav 14/03/2023

In this tutorial we will look at using YAML in PHP. Learn about Parsing and Writing YAML files using Symfony's YAML component.

Measuring code execution performance in JavaScript

Measuring code execution performance in JavaScript

by Gav 13/03/2023

Measuring code execution performance is an important way to identify bottlenecks. Use these methods in JavaScript to help optimise your code.

Measuring script/code execution time in PHP using microtime

Measuring script/code execution time in PHP, microtime

by Gav 06/03/2023

Find bottlenecks, optimise and clean your code, and speed up your apps by measuring the execution time of your PHP scripts using microtime.

Regenerate WordPress media image sizes, programmatically

Regenerate WordPress media image sizes, programmatically

by Gav 25/02/2021

Learn how to regenerate and update WordPress media and image sizes both programmatically (without plugin), and also with a handy plugin.

Magic Constants in PHP. What they are and how to use them.

Magic Constants in PHP. What they are and how to use them

by Gav 15/02/2021

Ever seen constants like __DIR__ and __FILE__ being used in PHP? These are 'Magic Constants', and this is how we can use them.

Detecting Keypress JavaScript

Detect single and multiple keypress events: JavaScript

by Gav 16/10/2019

Learn how to use event listeners to detect and handle single and multiple keypress events in JavaScript. Add modifier keys to your application!