Ratio d'aspect en attente: hacks pour les boîtes proportionnelles

En prévision d'un support généralisé pour la propriété de rapport d'aspect, je vous suggère de vous rappeler quelques variantes du «hack» que nous pouvons encore utiliser pour obtenir le même comportement avec des boîtes régulières.

rembourrage haut / bas en%

Un rapport hauteur / largeur sans rapport hauteur / largeur peut être obtenu en réglant la boîte pour avoir un haut de remplissage ou un bas de remplissage de zéro en%. Le pourcentage a été calculé à l'aide de la formule:

hauteur / largeur * 100%

Par exemple:

rapport hauteur / largeur 1x1 = 1/1 * 100% = remplissage - haut: 100%

rapport hauteur / largeur 4x3 = 3/4 * 100% = remplissage - haut: 75%

rapport hauteur / largeur 16x9 = 9/16 * 100% = rembourrage - haut: 56,25%

Dans certains cas, les pourcentages ont été arrondis au centième le plus proche:

rapport hauteur / largeur 3x2 = 2/3 * 100% = haut du rembourrage: 66,67% (66,66666666666667%)

Apparemment, les gens n'aimaient pas écrire des valeurs de propriété à 16 chiffres. Ce qui nous amène à

padding - fonction haut / bas + calc ()

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Et beau, et un petit indice sur ce qui arrive aux gens qui ne sont pas familiers avec le hack.

La hauteur de la boîte étant nulle, nous devions utiliser un positionnement absolu pour y placer quelque chose (un titre, par exemple). Pour cette raison, il n'était pas protégé contre le débordement de contenu.

, . :

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

Quelle est la façon de l'utiliser au travail? Je pense que nous pouvons commencer à utiliser le rapport hauteur / largeur et utiliser la directive @supports avec l'opérateur not pour être sûr:

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Cette méthode est la plus fiable.

Si quelqu'un travaillant avec votre CSS a besoin de positionner l'en-tête d'une manière ou d'une autre, il peut le faire avec flexbox et padding avec auto.

float cessera de fonctionner. De cette façon, ils ne heurteront rien par accident.

Et avec le temps, lorsque le soutien se généralisera, nous supprimerons simplement la règle.