Relación de aspecto pendiente: trucos para cajas proporcionales

En previsión del soporte generalizado para la propiedad de relación de aspecto, le sugiero que recuerde algunas variaciones del "truco" que aún podemos usar para lograr el mismo comportamiento con cajas regulares.

acolchado-arriba / abajo en%

Se podría lograr una relación de aspecto sin relación de aspecto configurando el cuadro para que tenga un relleno cero en la parte superior o en la parte inferior del relleno en%. El porcentaje se calculó mediante la fórmula:

alto / ancho * 100%

Por ejemplo:

relación de aspecto 1x1 = 1/1 * 100% = relleno - superior: 100%

relación de aspecto 4x3 = 3/4 * 100% = relleno - superior: 75%

relación de aspecto 16x9 = 9/16 * 100% = relleno - superior: 56,25%

En algunos casos, los porcentajes se redondearon a la centésima más cercana:

relación de aspecto 3x2 = 2/3 * 100% = padding-top: 66.67% (66.66666666666667%)

Aparentemente, a la gente no le gustaba escribir valores de propiedad de 16 dígitos. Lo que nos lleva a

padding - función superior / inferior + calc ()

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Y hermoso, y algunos indicios de lo que les está sucediendo a las personas que no están familiarizadas con el truco.

Dado que la altura del cuadro era cero, necesitábamos usar el posicionamiento absoluto para colocar algo (un título, por ejemplo) en él. Debido a esto, no estaba protegido contra el desbordamiento de contenido.

, . :

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

¿Cuál es la forma de utilizarlo en el trabajo? Creo que podemos comenzar a usar la relación de aspecto y usar la directiva @supports con el operador not para estar seguros:

.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%);
  }
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Este método es el más confiable.

Si alguien que trabaja con su CSS necesita posicionar el encabezado de alguna manera, puede hacerlo con flexbox y padding con auto.

el flotador simplemente dejará de funcionar. De esta manera, no golpearán accidentalmente nada.

Y con el tiempo, cuando el soporte se generalice, simplemente eliminaremos la regla.