Calculadora de proporção de aspecto CSS

Calcule e gere valores de propriedades de proporção de aspecto CSS.

Target Ratio

Width

Height

Preview

CSS snippets

Modern CSSRecommended

aspect-ratio: 16 / 9;

Legacy / IE Hack

position: relative;
padding-bottom: 56.25%;
height: 0;

"aspect-ratio" allows you to set the preferred ratio without hardcoding height, simplifying responsive images and iframes.

Overview

A propriedade de proporção de aspecto CSS mantém as proporções dos elementos, independentemente do tamanho do contêiner. Essencial para imagens, vídeos e cartões responsivos. Substituição moderna da técnica de padding-hack.

💡

Pro Tips

Provide a default aspect ratio for <img> elements to prevent 'Cumulative Layout Shift' during page load.
The padding-top/bottom trick works by basing the padding percentage on the parent's width.
You can now use `aspect-ratio` on almost all elements including divs, iframes, and videos.
If you provide both width and height PLUS an aspect-ratio, the width/height usually takes precedence in browsers.

Fun Facts

Formula: proporção: largura/altura; ou proporção: 16/9;

Used with this

Similar tools that might be useful

Pontuação do ato

Calcule a pontuação do ato.

Conversor ASCII

Converta texto em códigos ASCII e vice-versa. Útil para programação e codificação de dados.

Calculadora de taxa de aceitação

Calcule as taxas de aceitação de inscrições e dados de admissão. Visualize a seletividade com gráficos.