Maintain portrait aspect ratio on div using css

Question

Given:

.col-1 {width: 12.5%;}
.col-2 {width: 25%;}
.col-3 {width: 37.5%;}
.col-4 {width: 50%;}
.col-5 {width: 62.5%;}
.col-6 {width: 75%;}
.col-7 {width: 87.5%;}
.col-8 {width: 100%;}

I wish for each col's height to be 150% of its width.

I have seen solutions for width to be calculated based on height that use the viewport's height - but referencing viewport won't be adequate here because some cols may span 1/8th of the screen while others span 1/4th etc, while the viewport height will be constant.

I have seen the css calc() function proposed (for example, on a child div within a column) - but I don't know how to reference the parent element's width. According to W3Schools the % css unit of measure is supposed to be relative to a parent element - but I want to set child height based on parent width, which is a different measure.

W3Schools also has a tutorial on maintaining aspect ratios by adding padding-top to the containing div, as a percentage. For example,

padding-top: 66.66%;

will maintain a 3:2 landscape aspect ratio. But if I set:

padding-top: 150%;

then yes, we obtain a portrait ratio of 2:3 but the height of a 100% width div exceeds the height of the window. If I attempt to reduce the size of the div overall by setting its width to:

width: 25%;

Then the column's width does reduce but its height remains 150% of the screen's height.

Any suggestions on using the 8 column layout and being able to set a div at a width of 1 to 8 columns and have the browser automatically set that div's height to 150% of its width?

Do not see any problems with using `vw` units. Please add your HTML. — Kosh, Aug 23 '18 at 02:17
Sorry - didn't keep the vw code, but arkhi's answer below nails it. See also my comment on that, for a new link to another article that expounds this technique further. Thanks. — youcantryreachingme, Aug 23 '18 at 07:43

arkhi · Accepted Answer · 2020-10-28T18:09:49.227

Based on the padding solution, something like this could work, but that’s pretty ugly markup wise, and depending on the content you want to put in there, it might be a terrible thing to do.

.col-1 {width: 12.5%;}
.col-2 {width: 25%;}
.col-3 {width: 37.5%;}
.col-4 {width: 50%;}
.col-5 {width: 62.5%;}
.col-6 {width: 75%;}
.col-7 {width: 87.5%;}
.col-8 {width: 100%;}

.height-ratio {
    position: relative;
    overflow: auto;
    background: #ddd;
}

.height-ratio::before {
    display: block;
    width: 100%;
    padding-top: 150%;
    content: "";
}

.content {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    padding: .25em;
}

<div class="col-1 height-ratio">
    <div class="content">
        some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing
    </div>
</div>

Thank you. Your code clearly works. The difference between yours and the W3Schools tutorial is that you have 3 nested DIVs - the first sets the column width, the second sets the padding, and the third contains the content. In the W3Schools tutorial, they have 2 DIVs - the first setting the width and padding. If I modify the width there (to anything other than 100%), the ratio is broken. Was about to say I don't understand how the box is modeled but just now also found this: https://css-tricks.com/aspect-ratio-boxes/ — youcantryreachingme, Aug 23 '18 at 07:42
Actually, you can just use `.col-1::before` and apply the `overflow: auto` and `position: relative` to the column, without having the extra `.height-ratio` div. I made a codepen to better show how this could work: https://codepen.io/arkhi/pen/wEKKRd I’ll update the answer once you confirmed you’re good. — arkhi, Aug 23 '18 at 16:57

Maintain portrait aspect ratio on div using css

1 Answers1