Rasio aspek tertunda: peretasan untuk kotak proporsional

Untuk mengantisipasi dukungan luas untuk properti rasio aspek, saya sarankan Anda mengingat beberapa variasi "peretasan" yang masih dapat kita gunakan untuk mencapai perilaku yang sama dengan kotak biasa.

padding-atas / bawah dalam%

Rasio aspek non-rasio aspek dapat dicapai dengan menyetel kotak agar memiliki padding-top nol atau padding-bottom dalam%. Persentase dihitung menggunakan rumus:

tinggi / lebar * 100%

Misalnya:

rasio aspek 1x1 = 1/1 * 100% = padding - atas: 100%

rasio aspek 4x3 = 3/4 * 100% = padding - atas: 75%

rasio aspek 16x9 = 9/16 * 100% = padding - teratas: 56,25%

Dalam beberapa kasus, persentase dibulatkan ke perseratus terdekat:

rasio aspek 3x2 = 2/3 * 100% = padding-top: 66,67% (66.66666666666667%)

Rupanya orang tidak suka menuliskan nilai properti 16 digit. Yang membawa kita ke

padding - fungsi top / bottom + calc ()

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Dan cantik, dan sedikit petunjuk tentang apa yang terjadi pada orang-orang yang tidak terbiasa dengan peretasan.

Karena ketinggian kotak itu nol, kami perlu menggunakan pemosisian absolut untuk menempatkan sesuatu (judul, misalnya) di dalamnya. Karena itu, itu tidak dilindungi dari luapan konten.

, . :

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

Bagaimana cara menggunakannya di tempat kerja? Saya rasa kita dapat mulai menggunakan rasio aspek dan menggunakan petunjuk @supports dengan operator not agar aman:

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Metode ini paling andal.

Jika seseorang yang bekerja dengan CSS Anda perlu memposisikan heading, mereka dapat melakukannya dengan flexbox dan padding dengan auto.

float hanya akan berhenti bekerja. Dengan cara ini, mereka tidak akan menabrak apapun secara tidak sengaja.

Dan seiring waktu, ketika dukungan menjadi lebih luas, kami akan menghapus aturan tersebut.