CSS - Aspect Ratio and 100% viewport height

Question

I am trying to set the aspect ratio of a div to portrait (9:16) like this..

.ratio {
  position: relative;
  height: 0;
  width: 100%;
  background: teal;
  padding-bottom: 177.77%;
}

<div class="ratio">
  16:9
</div>

This is working as expected, but I am now wanting to make it so that it has a maximum height of 100% of the viewport.

I am trying to make sure it fits exactly onto the screen whilst keeping the aspect ratio and not introducing scrollbars.

What's my best approach?

see here:https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_aspect_ratio_169 — לבני מלכה, Jul 10 '18 at 12:35
That's the same as my example, I am trying to set a maximum height — fightstarr20, Jul 10 '18 at 12:38
I don't want scrollbars. I want to maximum height to be 100% of the viewport. This is for a fixed layout — fightstarr20, Jul 10 '18 at 12:50
in your .ratio class, add `height: 100vh;padding-right: 56%; width:0` and remove the padding bottom, it this what you wanted? — Pascal Goldbach, Jul 10 '18 at 12:56
possible duplicate of : https://stackoverflow.com/questions/51041691/inner-div-with-square-ratio-and-flexbox/51041869#51041869 — Temani Afif, Jul 10 '18 at 13:00

score 2 · Accepted Answer · answered Jul 10 '18 at 12:58

You will need to use the ratio of 16/9 = 1.778 to calculate the width using calc() css function

body {
  margin: 0;
}

.ratio {
  position: relative;
  height: 100vh;
  background: teal;
  width: calc(1.778 * 100vh);
  margin: auto;
}

<div class="ratio">
  16:9
</div>

score -1 · Answer 2 · answered Jul 10 '18 at 12:30

-1

I would recommend then using the vh unit for the height then.

height: 100vh;

answered Jul 10 '18 at 12:30

Keith

2 Answers2