Que é a relación de aspecto
É a proporción entre o ancho e o alto dunha imaxe, escrita como ancho:alto. Unha imaxe de 1920 × 1080
e outra de 1280 × 720 teñen tamaños distintos pero a mesma relación, 16:9: a segunda é a primeira reducida. Por iso
a proporción é o que importa ao deseñar un oco, e o tamaño en píxeles é o que importa ao exportar.
Como se calcula
Para sacar o alto: alto = ancho × alto da proporción ÷ ancho da proporción. Con 1280 de ancho e 16:9, 1280 × 9 ÷ 16 = 720. Para o ancho, ao revés: ancho = alto × 16 ÷ 9. E para saber a proporción dun tamaño divídense ancho e alto polo seu máximo común divisor: 1920 e 1080 entre 120 dan 16 e 9.
Non todos os tamaños dan unha proporción «redonda». 1366 × 768, a resolución de moitos portátiles, é 683:384, que na práctica se trata como 16:9.
Imaxes con proporción en ximg.es
O xerador acepta a proporción directamente no URL: /1280x16:9 devolve unha
imaxe de 1280 × 720, e /16:9x720 calcula o ancho a partir do alto. Se o resultado non é enteiro,
trúncase: /600x16:9 dá 600 × 337, non 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 en CSS
A propiedade aspect-ratio reserva o espazo dunha imaxe ou un vídeo antes de que cargue, e evita que a
páxina salte. Con object-fit: cover, calquera imaxe recórtase para encaixar na proporción:
.miniatura {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}Se pos width e height na etiqueta <img>, o navegador xa calcula esa proporción pola súa conta.