Sometimes, we want to auto resize image in CSS flexbox layout and keeping aspect ratio
In this article, we’ll look at how to auto resize image in CSS flexbox layout and keeping aspect ratio.
How to auto resize image in CSS flexbox layout and keeping aspect ratio?
To auto resize image in CSS flexbox layout and keeping aspect ratio, we set the object-fit property.
For instance, we write
img {
object-fit: contain;
aspect-ratio: 2/1;
}
to add object-fit: contain; to make the img element fit its container.
We also set the aspect-ratio to make the image keep its aspect ratio.
Conclusion
To auto resize image in CSS flexbox layout and keeping aspect ratio, we set the object-fit property.
