保留中のアスペクト比：プロポーショナルボックスのハック

アスペクト比プロパティが広くサポートされることを見越して、通常のボックスで同じ動作を実現するために引き続き使用できる「ハック」のバリエーションをいくつか覚えておくことをお勧めします。

パディング-上/下（％）

アスペクト比以外のアスペクト比は、ボックスのパディングトップまたはパディングボトムを％でゼロに設定することで実現できます。パーセンテージは、次の式を使用して計算されました。

高さ/幅* 100％

例：

1x1アスペクト比= 1/1 * 100％=パディング‑トップ：100％

4x3アスペクト比= 3/4 * 100％=パディング‑トップ：75％

16x9アスペクト比= 9/16 * 100％=パディング‑トップ：56.25％

場合によっては、パーセンテージは100分の1に四捨五入されます：

3x2アスペクト比= 2/3 * 100％=パディングトップ：66.67％（66.66666666666667％）

どうやら人々は16桁のプロパティ値を書くのが好きではなかったようです。それは私たちを

パディング‑上/下+ calc（）関数

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

そして美しく、そしてハックに精通していない人々に何が起こっているかについての少しのヒント。

ボックスの高さがゼロだったので、絶対位置を使用して何か（タイトルなど）をボックスに配置する必要がありました。このため、コンテンツのオーバーフローから保護されていませんでした。

, . :

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

職場でそれを使用する方法は何ですか？安全のために、アスペクト比の使用を開始し、not演算子を指定して@supportsディレクティブを使用できると思います。

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

この方法が最も信頼できます。

CSSを使用している人が何らかの方法で見出しを配置する必要がある場合は、flexboxとautoのパディングを使用して配置できます。

floatは動作を停止します。このように、彼らは誤って何かを打つことはありません。

そして、時間の経過とともに、サポートがさらに普及すると、ルールを削除するだけです。