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:
- Specifying the
width
andheight
attributes on an image helps the browser reserve space for it as soon as it parses the relevant HTML; - Having a reserved space for images prevents layout shifts and minimizes reflow, which leads to a better user-experience;
- The browser can calculate the
width
orheight
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.
This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.