How to scale a div’s height proportionally to its width using CSS?

Spread the love

To scale a div’s height proportionally to its width using CSS, we use the aspect-ratio property.

For instance, we write

.my-div1 {
  width: 100px;
  aspect-ratio: 16/9;
  background-color: black;
  margin-top: 10px;
}

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