Pending aspect-ratio: hacks for proportional boxes

In anticipation of widespread support for the aspect-ratio property, I suggest you remember a few variations of the hack that we can still use to achieve the same behavior with regular boxes.

padding-top / bottom in%

A non-aspect-ratio aspect ratio could be achieved by setting the box to have a zero padding-top or padding-bottom in%. The percentage was calculated using the formula:

height / width * 100%

For example:

1x1 aspect ratio = 1/1 * 100% = padding ‑ top: 100%

4x3 aspect ratio = 3/4 * 100% = padding ‑ top: 75%

16x9 aspect ratio = 9/16 * 100% = padding ‑ top : 56.25%

In some cases, percentages were rounded to the nearest hundredth:

3x2 aspect ratio = 2/3 * 100% = padding-top: 66.67% (66.66666666666667%)

Apparently people didn't like writing 16-digit property values. Which brings us to

padding ‑ top / bottom + calc () function

.aspect-ratio-box {
  padding-bottom: calc(120 / 327 * 100%);
  height: 0;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

And beautiful, and a little hints at what is happening, people who are not familiar with the hack.

Since the height of the box was zero, we needed to use absolute positioning to place something (a title, for example) in it. Because of this, it was not protected from content overflow.

, . :

article . background‑image. . article ( ).  — .  — . , . c. .

   

padding-top/bottom ::before

, %  ‑ float: left; :

.aspect-ratio-box {
    display: flow-root;
/*     . */
}

.aspect-ratio-box::before {
    content: "";
    float: left;
    padding-bottom: calc(120 / 327 * 100%);
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

flow-root (..  ~ 2017 ), , column-count:

.aspect-ratio-box {
    column-count: 1;
/*  clearfix */
}

.aspect-ratio-box::before {
    content: "";
    float: left;
    padding-bottom: calc(120 / 327 * 100%);
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

flexbox

display: flex; , :

.aspect-ratio-box {
  display: flex;
/*     , */
/*   flex      */
/*     */
}

.aspect-ratio-box::before {
    content: "";
    padding-bottom: calc(120 / 327 * 100%);
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, .  — .

? @supports not

What is the way to use in work? It seems to me that we can start using aspect ‑ ratio and be safe with the @supports directive with the not operator:

.aspect-ratio-box {
  aspect-ratio: 327 / 120;
}

@supports not (aspect-ratio: 1 / 1) {
/*     ,  */
/*    */
  .aspect-ratio-box {
    column-count: 1;
  }

  .aspect-ratio-box::before {
    content: "";
    float: left;
    padding-bottom: calc(120 / 327 * 100%);
  }
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

This method is the most reliable.

If someone working with your CSS needs to position the heading somehow, they can do it with flexbox and padding with auto.

float will just stop working. This way, they won't accidentally hit anything.

And over time, when support becomes more widespread, we will simply remove the rule.