How to Maintain Image Aspect Ratio Using HTML?

In modern browsers, you can simply specify the width and height attributes on an <img> tag to make an image adhere to a certain aspect ratio. In the following example for instance, the image size of 640x360 follows a 16:9 aspect ratio (which means that if you resized the image by only specifying its width, the browser would automatically determine its height without distorting the image):

<img src="..." width="640" height="360" />

Notice the width and height attributes do not have any units specified. These refer to pixels. This helps ensure that the specified area is reserved for the image into which it would be stretched or squeezed (regardless of whether the real image dimensions are matched or not).

When you add the width and height attributes like that, most modern browsers will automatically add a default CSS aspect-ratio property to images (based on their width and height attributes) like so:

img {
    aspect-ratio: attr(width) / attr(height);
}

Which, for example applied to the earlier example, would translate to the following:

img {
    aspect-ratio: 640 / 360;
}

With that applied, you can now resize an image while maintaining its aspect ratio by adding something like the following style rule:

img {
    width: 100%;
    height: auto;
}

This would resize the image to the width of its container. The browser can easily calculate the height based on the aspect ratio as defined in the <img width="..." height="..." /> attributes. For example, if the image is shown in a container that's 320px wide, the browser will calculate its height to 180px (based on the 640x360 image size from the earlier example). This means that the browser can reserve this area for the image early on (i.e. before the image starts to download), effectively preventing layout shifts and leading to a good user-experience.

As it may already be evident by now, the benefit of maintaining the aspect ratio of an image using this approach has the following benefits:

1. Specifying the width and height attributes on an image helps the browser reserve space for it as soon as it parses the relevant HTML;
2. Having a reserved space for images prevents layout shifts and minimizes reflow, which leads to a better user-experience;
3. The browser can calculate the width or height when one or the other is specified, allowing to maintain the aspect ratio of the image as it's container is resized.

Prior to this modern approach of specifying the width and height attributes on an <img> element, it was a common practice to use CSS to make images responsive, for example, in the following way:

img {
    width: 100%; /* or max-width: 100%; */
    height: auto;
}

The problem with this approach is the fact that the space for the image would only be allocated/determined once the image starts to download. This may lead to unwanted layout shifts and reflow as the images are being downloaded and rendered on the page.