Què és la relació d’aspecte
És la proporció entre l’amplada i l’alçada d’una imatge, escrita com a amplada:alçada. Una imatge de
1920 × 1080 i una altra de 1280 × 720 tenen mides diferents però la mateixa relació, 16:9: la segona és la primera
reduïda. Per això la proporció és el que importa en dissenyar un espai, i la mida en píxels és el que importa en exportar.
Com es calcula
Per treure l’alçada: alçada = amplada × alçada de la proporció ÷ amplada de la proporció. Amb 1280 d’amplada i 16:9, 1280 × 9 ÷ 16 = 720. Per a l’amplada, a l’inrevés: amplada = alçada × 16 ÷ 9. I per saber la proporció d’una mida es divideixen amplada i alçada pel seu màxim comú divisor: 1920 i 1080 entre 120 donen 16 i 9.
No totes les mides donen una proporció «rodona». 1366 × 768, la resolució de molts portàtils, és 683:384, que a la pràctica es tracta com a 16:9.
Imatges amb proporció a ximg.es
El generador accepta la proporció directament a la URL: /1280x16:9 retorna una
imatge de 1280 × 720, i /16:9x720 calcula l’amplada a partir de l’alçada. Si el resultat no és enter, es
trunca: /600x16:9 dona 600 × 337, no 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
La propietat aspect-ratio reserva l’espai d’una imatge o un vídeo abans que carregui, i evita que la
pàgina salti. Amb object-fit: cover, qualsevol imatge es retalla per encaixar en la proporció:
.miniatura {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}Si poses width i height a l’etiqueta <img>, el navegador ja calcula aquesta proporció pel seu compte.