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?

Answer 1

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>