Proporção pendente: hacks para caixas proporcionais

Antecipando o suporte generalizado para a propriedade de proporção de aspecto, sugiro que você se lembre de algumas variações do "hack" que ainda podemos usar para obter o mesmo comportamento com caixas regulares.

preenchimento superior / inferior em%

Uma proporção de aspecto sem relação de aspecto pode ser alcançada configurando a caixa para ter um preenchimento superior ou inferior em% zero. A porcentagem foi calculada usando a fórmula:

altura / largura * 100%

Por exemplo:

proporção 1x1 = 1/1 * 100% = preenchimento - topo: 100%

proporção 4x3 = 3/4 * 100% = preenchimento - topo: 75%

proporção 16x9 = 9/16 * 100% = preenchimento - topo: 56,25%

Em alguns casos, as porcentagens foram arredondadas para o centésimo mais próximo:

proporção de aspecto 3x2 = 2/3 * 100% = preenchimento superior: 66,67% (66,666666666666667%)

Aparentemente, as pessoas não gostavam de escrever valores de propriedade de 16 dígitos. O que nos leva a

preenchimento - função superior / inferior + calc ()

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

E lindo, e uma pequena dica do que está acontecendo com as pessoas que não estão familiarizadas com o hack.

Como a altura da caixa era zero, precisávamos usar o posicionamento absoluto para colocar algo (um título, por exemplo) nela. Por isso, não foi protegido contra estouro de conteúdo.

, . :

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

Qual é a forma de usar no trabalho? Acho que podemos começar a usar a proporção de aspecto e usar a diretiva @supports com o operador not para estar seguro:

.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 é o mais confiável.

Se alguém que trabalha com seu CSS precisa posicionar o título de alguma forma, pode fazê-lo com flexbox e preenchimento com auto.

float simplesmente para de funcionar. Dessa forma, eles não atingirão nada acidentalmente.

E com o tempo, quando o suporte se tornar mais disseminado, simplesmente removeremos a regra.