Proporção de Css

Esta ferramenta gera CSS para uma proporção largura:altura usando a propriedade moderna `aspect-ratio` ou o clássico hack de padding percentual. Ela oferece predefinições de proporções comuns, entradas personalizadas de largura/altura (1-100), uma caixa de visualização ao vivo e uma saída pronta para copiar. A visualização adapta sua renderização ao método selecionado para que você veja exatamente o que cada técnica produz.

1. Clique em uma predefinição de Common Ratio (16:9, 4:3, 1:1, 21:9, 3:2, 2:3, 9:16) ou insira Width e Height personalizados (1-100). 2. Escolha um Method: Modern (`aspect-ratio`) ou Padding Hack. 3. A caixa Preview renderiza a proporção usando a técnica selecionada. 4. Clique em Copy no cartão Output para copiar o CSS gerado.

Modern gera uma única linha: `aspect-ratio: <width> / <height>;`. Padding Hack gera um `.container` com `position: relative; width: 100%; padding-top: <height/width*100>%;` e um `.content` posicionado absolutamente que o preenche, que é a técnica legada para ambientes sem suporte a `aspect-ratio`. A visualização usa os mesmos estilos, limitados a uma largura máxima de 400px, então o resultado visual corresponde à técnica que o CSS descreve.