CSS aspect ratio preserving height

Question

I have a height that has to be a fixed percent.

It cannot be in pixels, it's got to be 20%.

I need the width to adjust to 75% of the height.

All over the place, people are explaining how to use CSS to scale an element's height and preserve width, but I need to scale width and preserve height.

Supposedly using padding-top will scale height:

.container {
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

But padding-left doesn't do the same thing with width.

Any help?

score 0 · Answer 1 · answered Mar 11 '21 at 19:01

You can use the new css property aspect-ratio but be aware support is low at present

aspect-ratio: attr(width) / attr(height);

.parent {
  height:450px;
  width:50vw;
  border:1px solid green;
}

.child {
  height:20%;
  border:1px solid red;
  aspect-ratio: .75 / 1;
}

<div class="parent">
  <div class="child"></div>
</div>

CSS aspect ratio preserving height

1 Answers1