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.