How to maintain aspect ratio using HTML IMG tag with CSS?

Spread the love

Sometimes, we want to maintain aspect ratio using HTML IMG tag with CSS.

In this article, we’ll look at how to maintain aspect ratio using HTML IMG tag with CSS

To maintain aspect ratio using HTML IMG tag with CSS, we set the height or the width.

For instance, we write

<img src="https://picsum.photos/200/250?grayscale" class="widthSet" />

<img src="https://picsum.photos/200/250?grayscale" class="heightSet" />

to add a few images.

Then we write

.widthSet {
  max-width: 64px;
}

.heightSet {
  max-height: 64px;
}

to set the max-width or max-height to keep the aspect ratio.

To maintain aspect ratio using HTML IMG tag with CSS, we set the height or the width.