How to auto resize image in CSS flexbox layout and keeping aspect ratio?

Spread the love

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.

Leave a Reply

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