title: Maintain portrait aspect ratio on div using css
body: <p>Given:</p>
  
  <pre><code>.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%;}
  </code></pre>
  
  <p>I wish for each col's height to be 150% of its width.</p>
  
  <p>I have seen <a href="https://stackoverflow.com/questions/29903053/css-maintain-div-aspect-ratio-given-height">solutions for width to be calculated based on height that use the viewport's height</a> - 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.</p>
  
  <p>I have seen the css <a href="https://www.w3schools.com/cssref/func_calc.asp" rel="nofollow noreferrer">calc() function proposed</a> (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.</p>
  
  <p>W3Schools also has a <a href="https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_aspect_ratio_32" rel="nofollow noreferrer">tutorial on maintaining aspect ratios</a> by adding padding-top to the containing div, as a percentage. For example, </p>
  
  <pre><code>padding-top: 66.66%;
  </code></pre>
  
  <p>will maintain a 3:2 <em>landscape</em> aspect ratio. But if I set:</p>
  
  <pre><code>padding-top: 150%;
  </code></pre>
  
  <p>then yes, we obtain a <em>portrait</em> 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:</p>
  
  <pre><code>width: 25%;
  </code></pre>
  
  <p>Then the column's width does reduce but its height remains 150% of the screen's height.</p>
  
  <p>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?</p>