Manter uma determinada proporção no CSS sempre foi um desafio, tanto que é a origem de um dos memes mais conhecidos, o CSS IS AWESOME overflown square. Bem, a nova propriedade proporção de aspecto do O módulo CSS box sizing nível 4 foi implementado recentemente em todos os principais navegadores, permitindo-nos nos livrar de antigos hacks e, finalmente, nos dar controle perfeito sobre as proporções de qualquer elemento. 
Os métodos antigos
Por anos, temos contado com um hack muito criativo, mas problemático-a técnica de porcentagem padding-top , que realiza o trabalho, mas exige que planejemos tudo em torno dela. O truque se baseia em um comportamento muito obscuro de CSS, em que os preenchimentos verticais (ou tecnicamente, o preenchimento de direção do bloco) são calculados com base na largura do elemento em vez de sua altura quando declarada como uma porcentagem, caso contrário, eles entrariam em um loop redundante de tornando o elemento cada vez mais alto. Poderíamos usar isso para manter uma proporção, simplesmente aplicando uma porcentagem de preenchimento superior calculada como altura/largura * 100 .
Por exemplo, se quiséssemos uma proporção de 1 para 1 (ou seja, um quadrado), simplesmente declararíamos o padding-top: 100% do elemento.
As proporções típicas de imagem/vídeo de 4: 3 e 16: 9 podem ser obtidas com padding-top: 75% (3/4 * 100) e padding-top: 56,25% (9/16 * 100) respectivamente.
Isso funcionou muito bem para criar recipientes vazios que poderíamos usar para fins decorativos. Se quiséssemos ter um contêiner com uma imagem de fundo que se ajustasse ao tamanho do contêiner e mantivesse a proporção, seria suficiente declarar:
.block-element { largura: 100%; padding-top: 75%/* proporção 4: 3 */ plano de fundo: url (/img/example.svg); tamanho do fundo: capa;/* impede o corte */
}
Ver a Caneta
Proporção para imagens de fundo, à maneira antiga de Facundo Corradini ( @facundocorradini )
em CodePen .
Mas as coisas ficam um pouco mais complicadas assim que começamos a adicionar conteúdo real à caixa (por exemplo, um vídeo), pois o preenchimento empurra nosso conteúdo para baixo. Isso significa que temos que confiar na abstração do hack para um contêiner e no posicionamento absoluto do conteúdo apenas para fazer nosso conteúdo ignorar o preenchimento. Somando tudo, a implementação típica da proporção de aspecto para um vídeo 16: 9 será:
.video-container { posição: relativa; largura: 100%; tampo acolchoado: 56,25%;
} iframe [src *="https://www.youtube.com"] { posição: absoluta; topo: 0; largura: 100%; altura: 100%;
}
Veja a Caneta
Mantendo proporções em vídeos, à maneira antiga de Facundo Corradini ( @facundocorradini )
em CodePen .
Isso é ótimo para um vídeo e um contêiner de 100% de largura, mas e se quiséssemos manter uma proporção e ter o contêiner dimensionado dinamicamente de acordo com seu conteúdo? É aí que o hack atinge níveis desproporcionais. Se usássemos a técnica de posicionamento absoluto, ter muito conteúdo nos colocaria em risco de transbordamentos terríveis. Se quiséssemos que a largura do contêiner fosse dimensionada automaticamente para o conteúdo, nosso elemento posicionado de forma absoluta não seria capaz de fazer o contêiner crescer.
Uma solução para ambos é usar o hack padding-top em um pseudoelemento flutuante para controlar a proporção de aspecto, permitindo que o contêiner cresça com nosso conteúdo, se necessário. O desafio, então, é fazer com que o pseudo-elemento seja renderizado de uma forma que permaneça oculto para o usuário, mas ainda obtenha as dimensões reais para afetar o contêiner.
Isso pode ser alcançado em fluxo normal com uma margem negativa correspondendo a uma largura de 1px, como se tentássemos usar um elemento de largura zero, o navegador o ignoraria completamente:
.container:: before { contente:""; flutuar: esquerda; tampo acolchoado: 75%;/* Proporção 4: 3 */ largura: 1px; margem esquerda:-1px;
}
.container:: after {/* classic clearfix */ contente:""; display: mesa; limpar ambos;
}
Ver a Caneta
Proporção com conteúdo, à moda antiga de Facundo Corradini ( @facundocorradini )
em CodePen .
No layout de grade, podemos potencialmente forçar o pseudoelemento a compartilhar a coluna e a linha do conteúdo real:
.element { grade-coluna: 1; grade de linha: 1;
} .container:: before { contente:""; tampo acolchoado: 100%;/* Proporção de 1: 1 */ grade-coluna: 1; grade de linha: 1;
}
Veja a Caneta
Manter os círculos circulares, do jeito antigo (ish) de Facundo Corradini ( @facundocorradini )
em CodePen .
A propriedade CSS proporção
A maneira nova e mais simples não requer nenhum desses hacks. Ele nos permite declarar explicitamente a proporção de aspecto desejada e o navegador fará sua mágica para mantê-la.
Um quadrado é simplesmente proporção: 1/1 , um vídeo 16: 9 obtém proporção: 16/9 , etc.
Contanto que pelo menos uma das dimensões seja auto , o navegador ajustará o tamanho da caixa para manter a proporção fornecida (se especificarmos ambos altura e largura , proporção de aspecto serão ignorados).
Melhor ainda, um elemento com uma proporção declarada tentará mantê-la, mas se expandirá para evitar transbordamentos se necessário, o que nos poupa de usar posicionamento absoluto e o hack do pseudoelemento.
Isso nos permite realizar os truques antigos de uma maneira muito mais simples, mas também abre a porta para novas possibilidades ilimitadas.
proporção da imagem para direção de arte
Um truque interessante que podemos usar com a nova propriedade é alterar a proporção da imagem em consultas de mídia. Podemos querer que uma imagem seja 16: 9 no modo paisagem, mas mantenha o formato 1: 1 quando estiver no modo retrato.
Claro, usar um conjunto de origens de imagens múltiplas com o elemento
.ratiod-image { proporção da imagem: 1/1; ajuste ao objeto: capa; largura: 75vw;
} @media (orientação: paisagem) { .ratiod-image { proporção da imagem: 16/9; }
}
Veja a caneta
Proporção para direção de arte de Facundo Corradini ( @facundocorradini )
em CodePen .
Uma coisa legal sobre isso é que as implementações futuras permitirão até mesmo a interpolação da propriedade da proporção de aspecto, então ela será capaz de fazer uma transição suave de um para o outro!
Manter a proporção de vídeos sem um contêiner auxiliar
Um dos meus aplicativos favoritos para a nova propriedade é manter a proporção dos vídeos incorporados sem ter que depender do posicionamento absoluto ou do hack de preenchimento, mantendo a marcação livre de contêineres desnecessários.
Para fazer isso, podemos simplesmente declarar a largura como quisermos (provavelmente, 100% ), usar a propriedade de proporção de aspecto para manter a relação entre largura e altura e definir o 100% . code> height para unset para evitar que a altura declarada no HTML assuma o controle:
iframe [src *="https://www.youtube.com"] {/* segmenta qualquer iframe do YouTube */ largura: 100%;/* alonga o iframe para a largura do contêiner */ altura: não definida;/* ignorar o atributo de altura do HTML */ proporção da imagem: 16/9;/* ajustar a altura para manter a proporção */
}
Ver a Caneta
Proporção em vídeos sem contêiner ou hacks de Facundo Corradini ( @facundocorradini )
em CodePen .
Ajustando a altura da linha da grade com base na largura das colunas dinâmicas
Um dos meus aspectos favoritos da grade CSS é a combinação autofit/minmax, que permite que nossa grade tenha quantas colunas de uma largura mínima determinada caber no contêiner, mas também que cresçam uniformemente para distribuir o espaço extra.
Mas normalmente, nossas linhas manteriam a altura predeterminada, transformando o que começou como quadrados em retângulos. Agora podemos ajustar automaticamente os tamanhos das linhas de acordo com a largura dinâmica das colunas!
Só precisamos definir uma proporção para os itens da grade e o navegador fará sua mágica:
.grid { display: grade; colunas do modelo de grade: repetir (ajuste automático, minmax (160px, 1fr));
}
.grid> * { proporção da imagem: 1/1;
}
Veja a caneta
Manter a proporção em uma grade CSS com colunas de tamanho dinâmico por Facundo Corradini ( @facundocorradini )
em CodePen .
Resolvendo o antigo meme “CSS IS AWESOME”
Podemos argumentar que a questão do meme é de sobredefinição. O overflow é um recurso de design do CSS, não um bug, pois prioriza a prevenção da perda de conteúdo. O suposto autor definiu excessivamente a interface, dando-lhe largura e altura fixas, e letras grandes que simplesmente não cabem, e é por isso que ela transborda.
Existem várias maneiras de corrigir isso-por exemplo, poderíamos deixá-lo crescer mais apenas mudando de uma largura fixa para um conteúdo mínimo, deixá-lo crescer mais se não tivéssemos definido a altura, permitindo barras de rolagem com overflow: auto ou scroll , etc.
Mas assumirei que a intenção é manter o quadrado… quadrado e deixar a caixa crescer conforme necessário para caber em qualquer texto que inserirmos.
Bem, com proporção, isso é fácil:
.grid { display: grade;
/* largura mínima é 120px, crescimento automático máximo */ colunas de modelo de grade: minmax (120px, automático);
/* proporção do quadrado */ proporção da imagem: 1/1; alinhar-itens: centro;
}
Veja a Caneta
CSS ASPECT-RATIO IS AWESOME de Facundo Corradini ( @facundocorradini )
em CodePen .
Conclusão
Mesmo que, à primeira vista, proporção possa parecer uma grafia alternativa para o antigo hack de proporção de aspecto, como acabamos de ver, é muito mais do que isso! Isso nos ajuda a simplificar o HTML, se livrar dos contêineres, declarar explicitamente as intenções do CSS, tornando-o mais fácil de manter, e conseguir coisas que antes eram extremamente difíceis ou mesmo impossíveis. Uma excelente adição à nossa caixa de ferramentas CSS!
A postagem Uma análise mais detalhada do CSS proporção da imagem apareceu primeiro no LogRocket Blog .
