O que é a proporção de uma imagem
É a relação entre a largura e a altura de uma imagem, escrita como largura:altura. Uma imagem de
1920 × 1080 e outra de 1280 × 720 têm tamanhos diferentes mas a mesma proporção, 16:9: a segunda é a primeira reduzida.
Por isso a proporção é o que importa ao desenhar um espaço, e o tamanho em píxeis é o que importa ao exportar.
Como se calcula
Para obter a altura: altura = largura × altura da proporção ÷ largura da proporção. Com 1280 de largura e 16:9, 1280 × 9 ÷ 16 = 720. Para a largura, ao contrário: largura = altura × 16 ÷ 9. E para saber a proporção de um tamanho dividem-se largura e altura pelo máximo divisor comum: 1920 e 1080 a dividir por 120 dão 16 e 9.
Nem todos os tamanhos dão uma proporção «redonda». 1366 × 768, a resolução de muitos portáteis, é 683:384, que na prática se trata como 16:9.
Imagens com proporção no ximg.es
O gerador aceita a proporção diretamente no URL: /1280x16:9 devolve uma
imagem de 1280 × 720, e /16:9x720 calcula a largura a partir da altura. Se o resultado não for inteiro,
é truncado: /600x16:9 dá 600 × 337, não 600 × 338.
<img src="https://ximg.es/1280x16:9" width="1280" height="720" alt="">
<img src="https://ximg.es/1080x4:5/e2e8f0/475569.webp" width="1080" height="1350" alt="">aspect-ratio em CSS
A propriedade aspect-ratio reserva o espaço de uma imagem ou de um vídeo antes de carregar, e evita que a
página salte. Com object-fit: cover, qualquer imagem é recortada para encaixar na proporção:
.miniatura {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}Se puser width e height na etiqueta <img>, o navegador já calcula essa proporção sozinho.