Categories
CSS

How to maintain the aspect ratio of a div with CSS?

Spread the love

Sometimes, we want to maintain the aspect ratio of a div with CSS.

In this article, we’ll look at how to maintain the aspect ratio of a div with CSS.

How to maintain the aspect ratio of a div with CSS?

To maintain the aspect ratio of a div with CSS, we use the aspect-ratio property.

For instance, we write

<div>aspect-ratio: 1 / 1;</div>

to add a div.

Then we write

div {
  background: teal;
  width: 50%;
  aspect-ratio: 1 / 1;
}

to set the aspect ratio of the div to 1:1 with aspect-ratio: 1 / 1;.

Conclusion

To maintain the aspect ratio of a div with CSS, we use the aspect-ratio property.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

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