Ausstehendes Seitenverhältnis: Hacks für proportionale Boxen

In Erwartung einer weit verbreiteten Unterstützung für die Eigenschaft "Seitenverhältnis" schlage ich vor, dass Sie sich an einige Variationen des "Hacks" erinnern, mit denen wir immer noch das gleiche Verhalten mit regulären Boxen erzielen können.

Polsterung oben / unten in%

Ein Seitenverhältnis ohne Seitenverhältnis könnte erreicht werden, indem die Box so eingestellt wird, dass in% oben oder unten keine Polsterung in% vorhanden ist. Der Prozentsatz wurde nach folgender Formel berechnet:

Höhe / Breite * 100%

Zum Beispiel:

1x1 Seitenverhältnis = 1/1 * 100% = Polsterung - Oberseite: 100%

4x3 Seitenverhältnis = 3/4 * 100% = Polsterung - Oberseite: 75%

16x9 Seitenverhältnis = 9/16 * 100% = Polsterung - oben: 56,25%

In einigen Fällen wurden die Prozentsätze auf das nächste Hundertstel gerundet:

3x2 Seitenverhältnis = 2/3 * 100% = Polsterung: 66,67% (66,666666666666667%)

Anscheinend haben die Leute nicht gerne 16-stellige Eigenschaftswerte geschrieben. Was uns dazu bringt

padding - Funktion top / bottom + calc ()

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Und schön und ein paar Hinweise darauf, was mit Leuten passiert, die mit dem Hack nicht vertraut sind.

Da die Höhe der Box Null war, mussten wir die absolute Positionierung verwenden, um etwas (z. B. einen Titel) darin zu platzieren. Aus diesem Grund war es nicht vor Inhaltsüberlauf geschützt.

, . :

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

Wie kann man es bei der Arbeit verwenden? Ich denke, wir können das Seitenverhältnis verwenden und die @ support-Direktive mit dem Nicht-Operator verwenden, um sicher zu gehen:

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Diese Methode ist die zuverlässigste.

Wenn jemand, der mit Ihrem CSS arbeitet, die Überschrift irgendwie positionieren muss, kann er dies mit Flexbox und Padding mit Auto tun.

float hört einfach auf zu arbeiten. Auf diese Weise treffen sie nicht versehentlich etwas.

Und im Laufe der Zeit, wenn die Unterstützung weiter verbreitet wird, werden wir die Regel einfach entfernen.