2

I would like to fit a div(red white box) in the center of the page. the black area represent the page layout the div needs to be height 100% when width cannot be stretched to keep the aspect ratio, or width 100% when height cannot be stretched. I am not sure what property I should use to calculate

It is also important that the div do not overflow the page so no scrollbar will be shown

I have tried: setting height: 100%; width: auto; or width: 100%; height: auto; both can achieve half of the target but I need to combine them together

*update: I have achieved with 1:1 aspect ratio with @Paulie_D 's answer, but what if the div needs to be 16:9 or 4:3?

2
  • What have you tried so far, what went wrong?
    – AntonyMN
    Commented Feb 25, 2020 at 9:46
  • @AntonyMN I tried height 100% width auto and height auto width 100%, but I don't know how to combine them together Commented Feb 25, 2020 at 10:34

3 Answers 3

3

You can manage this with vmin

Codepen Demo

vmin Equal to the smaller of vw and vh.

MDN

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #000;
}

div {
  width: 100vmin;
  height: 100vmin;
  background: white;
  margin: auto;
  border: 5px solid red;
}
<div></div>

4
  • Thanks! however this does not vertically center the div, so I made some modifications: div { width:100vmin; height:100vmin; background: white; margin-left:auto; margin-right:auto; transform:translate(-50%, -50%); top:50%; left:50%; position:absolute; } Commented Feb 26, 2020 at 5:19
  • something more to ask, what if the div needs to be maintaining a 4:3 or 16:9 ratio? Commented Feb 26, 2020 at 6:30
  • How about cases not 1:1? say, 16:9? How is vmin used for that?
    – Eric
    Commented Jun 17, 2022 at 11:00
  • This only works for 1:1, I added an answer to the question with a formula which accounts for any aspect ratio. Commented Feb 9 at 0:44
3

vmin solution only works for 1:1 aspect ratio, use this general formula instead:

width: min(<max-vw>vw, <max-vh * aspect-ratio>vh);
height: min(<max-vh>vh, <max-vw * inverse-aspect-ratio>vw);
  • max-vw/max-vh = the maximum viewport percentage you want the container to occupy (in the example it would be 100, but you may use this to have padding around the container)
  • aspect-ratio/inverse-aspect-ratio = you calculate the mathematical ratio and multiply it for the other number (max-vw or max-vh) (for 16:9 it would be: 16/9=1.778 and 9/16=0.56, respectively)

So, for 16:9 and no padding you would use:

width: min(100vw, 178vh);
height: min(100vh, 56vw);

Also, you might have noticed that the formula for 1:1 would be width: min(100vw, 100vh) which is the exact same as width: 100vmin

Snippet for the three aspect ratios asked:

body {
  padding: 0;
  margin: 0;
}

div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  writing-mode: vertical-lr;
  font-family: 'Helvetica';
  font-weight: semibold;
  color: white;
  
  padding: 7px;
  box-sizing: border-box;
}

.ar-1-1 {
  background-color: red;
  z-index: 3;
  
  width: min(100vh, 100vw); /* RELEVANT LINE */
  height: min(100vh, 100vw); /* RELEVANT LINE */
}

.ar-4-3 {
  background-color: blue;
  z-index: 2;
  
  width: min(100vw, 133vh); /* RELEVANT LINE */
  height: min(100vh, 75vw); /* RELEVANT LINE */
}

.ar-16-9 {
  background-color: green;
  z-index: 1;
  
  width: min(100vw, 178vh); /* RELEVANT LINE */
  height: min(100vh, 56vw); /* RELEVANT LINE */
}
<div class="ar-1-1">1:1 with no padding</div>
<div class="ar-4-3">4:3 with no padding</div>
<div class="ar-16-9">16:9 with no padding</div>

(the cards in the example are stacked in a way that can only be seen properly in a "widescreen" ratio)

-1

Just create a wrapper div wrapper with a percentage value for padding-bottom, like:

#wrapper {
    width: 100%;
    padding-bottom: 75%; /** For a 4:3 **/
}

This will cause wrapper to keep a 4:3 aspect ratio. This is because:

padding percentage is calculated with respect to the width of the generated box's containing box

Source: w3.org

For any aspect ratio, divide aspect ratio height/aspect ratio width to get the padding-bottom value

aspect ratio / padding-bottom
-----------------------------
16:9         / 56.25%
4:3          / 75%
3:2          / 66.66%
8:5          / 62.5%

Source: w3schools

1
  • this only applies to full width but not full height Commented Feb 25, 2020 at 10:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.