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

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.

Conclusion

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

Leave a Reply

Your email address will not be published. Required fields are marked *