Dealing with image aspect ratio

There are some methods that can be used to give an aspect ratio to an image element for better web responsiveness.

Padding-Top Hack

Before the availability of the CSS property aspect-ratio, a common method to manage aspect ratio of images (in a carousel for example) is to use the Padding-Top Hack.

<div class="container"><img alt="..." src="..."><img alt="..." src="..."></div>

.container {
    width: 100%;
    position: relative;
    padding-top: 100%; /* simulates an aspect-ratio of 1:1. For 4:3, use 75%, etc. */
}

.container > img {
    position: absolute;
    top: 0;
}

aspect-ratio property

It's simpler to use the aspect-ratio and thus does not overhaul the use of padding-top.

.container {
    width: 100%;
}
.container > img {
    aspect-ratio: 16 / 9; /* equivalent to padding-top: 56.25%; where (9/16 * 100 = 56.25) */ 
}

image attributes

Another technique that can be used, if we know the size of the image in advance (for example 800px * 600px), is by setting the width and height attributes of the image, and by setting the CSS property width to 100%.

<img alt="..." src="..." width="8" height="6">

img {
    width: 100%;
}

Resources

More information can be found reading this article.