Che cos’è il rapporto d’aspetto
È la proporzione tra la larghezza e l’altezza di un’immagine, scritta come larghezza:altezza. Un’immagine di
1920 × 1080 e una di 1280 × 720 hanno dimensioni diverse ma lo stesso rapporto, 16:9: la seconda è la prima rimpicciolita.
Per questo il rapporto è ciò che conta quando progetti uno spazio, e le dimensioni in pixel quando esporti.
Come si calcola
Per ottenere l’altezza: altezza = larghezza × altezza del rapporto ÷ larghezza del rapporto. Con una larghezza di 1280 e 16:9, 1280 × 9 ÷ 16 = 720. Per la larghezza, al contrario: larghezza = altezza × 16 ÷ 9. E per trovare il rapporto di una dimensione si dividono larghezza e altezza per il loro massimo comune divisore: 1920 e 1080 diviso 120 danno 16 e 9.
Non tutte le dimensioni danno un rapporto «tondo». 1366 × 768, la risoluzione di molti portatili, è 683:384, che in pratica si tratta come 16:9.
Immagini con un rapporto su ximg.es
Il generatore accetta il rapporto direttamente nell’URL: /1280x16:9 restituisce
un’immagine di 1280 × 720, e /16:9x720 calcola la larghezza a partire dall’altezza. Se il risultato non è
intero, viene troncato: /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 nel CSS
La proprietà aspect-ratio riserva lo spazio di un’immagine o di un video prima che si carichi, ed evita che
la pagina salti. Con object-fit: cover, qualsiasi immagine viene ritagliata per adattarsi al rapporto:
.miniatura {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}Se metti width e height nel tag <img>, il browser calcola già quel rapporto da solo.