Calcolatore di rapporto d'aspetto

Come usare il calcolatore di rapporto d’aspetto

1. Scegli uno dei Rapporti comuni (16:9, 4:3, 21:9, 1:1, 9:16, 3:2, 16:10, 4:5) oppure inserisci i tuoi valori in Rapporto o dimensioni originali. Puoi scrivere un rapporto (16 e 9) o le dimensioni reali di un’immagine, di un video o di uno schermo (1920 e 1080).
2. Leggi i risultati: il Rapporto semplificato, il Rapporto decimale (larghezza divisa per altezza), l’Orientamento e lo Standard più vicino. Il simbolo “≈” indica che le tue dimensioni sono vicine a quello standard, ma non identiche.
3. In Nuove dimensioni (mantiene il rapporto), inserisci una Nuova larghezza per ottenere l’altezza corrispondente, oppure una Nuova altezza per ottenere la larghezza. La riga sotto mostra il calcolo. Togli la spunta da Arrotonda a pixel interi se ti serve il valore esatto, per esempio per formati di stampa in millimetri.
4. Inverti larghezza e altezza trasforma un rapporto orizzontale in verticale (16:9 diventa 9:16) e viceversa.
5. L’Anteprima disegna un riquadro con il tuo rapporto e la tabella elenca le dimensioni di tutti i rapporti comuni alla nuova larghezza.
6. Copia il Codice CSS con Copia.

Come funziona il calcolo

Il rapporto d’aspetto è la larghezza divisa per l’altezza, scritto come due numeri interi. Per semplificarlo, lo strumento divide entrambi i lati per il loro massimo comune divisore (MCD): l’MCD di 1920 e 1080 è 120, quindi 1920:1080 = 16:9. I valori decimali vengono prima moltiplicati per una potenza di dieci (2,39:1 diventa 239:100).

Per ridimensionare mantenendo le proporzioni basta una proporzione, la classica regola del tre:

• nuova altezza = nuova larghezza × altezza originale ÷ larghezza originale
• nuova larghezza = nuova altezza × larghezza originale ÷ altezza originale

Esempio: un video 16:9 largo 1280 px è alto 1280 × 9 ÷ 16 = 720 px.

Alcuni schermi hanno rapporti “strani”. Un portatile 1366 × 768 si semplifica in 683:384, cioè 1,779:1, a un soffio da 16:9 (1,778:1): da qui “≈ 16:9”. I monitor venduti come 21:9 sono in realtà 64:27 (2560 × 1080) o 43:18 (3440 × 1440), ed è per questo che nella tabella compaiono entrambi.

La proprietà CSS aspect-ratio

aspect-ratio: 16 / 9; dice al browser di calcolare la dimensione mancante: con width: 100% l’altezza si adegua da sola e il riquadro scala insieme al suo contenitore. Funziona in tutti i browser attuali (dal 2021) ed è perfetta per video incorporati, card, segnaposto di immagini e miniature. Abbinala a object-fit: cover sulle immagini per ritagliarle invece di deformarle.

Il codice include anche la vecchia tecnica del padding-top come ripiego: un padding in percentuale viene calcolato sulla larghezza, quindi padding-top: 56.25% (9 ÷ 16) riserva un’area 16:9 e il contenuto viene posizionato in modo assoluto al suo interno. Ti serve solo per browser molto vecchi.

Riservare lo spazio con un rapporto evita anche gli spostamenti del layout mentre immagini e video si caricano, migliorando il punteggio Cumulative Layout Shift (CLS).