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)