Come si usa
- Per ridimensionare, inserisci il rapporto (per esempio 16 e 9) oppure scegline uno comune, quindi indica la larghezza o l’altezza. Calcoleremo l’altra dimensione.
- Per trovare un rapporto, inserisci la larghezza e l’altezza di un’immagine, uno schermo o un video.
- Controlla l’anteprima e copia la regola CSS aspect-ratio, se ti serve per l’impaginazione di una pagina web.
Come funziona
Il ridimensionamento proporzionale usa la formula altezza = larghezza × altezza del rapporto ÷ larghezza del rapporto (e viceversa). Le dimensioni in pixel sono di solito numeri interi, quindi il risultato può essere arrotondato; quando un rapporto non dà un risultato intero, per esempio 16:9 con una larghezza di 1000, l’altezza arrotondata (563) è un’approssimazione vicina, non una corrispondenza esatta.
Le dimensioni si semplificano dividendo entrambi i valori per il loro massimo comune divisore: 1920 e 1080 sono divisibili per 120, quindi il rapporto è 16:9. Alcune dimensioni reali non corrispondono a un rapporto comune. 1366×768 equivale esattamente a 683:384, molto vicino a 16:9; perciò lo strumento mostra anche il rapporto comune più vicino quando la differenza è inferiore al 2 %. Allo stesso modo, i monitor “21:9” hanno in realtà un rapporto di 64:27 (2560×1080) o 43:18 (3440×1440): 21:9 è un nome commerciale.
In CSS, aspect-ratio: 16 / 9 mantiene le proporzioni di un elemento quando cambia la sua larghezza. È utile per incorporare video e creare segnaposto per le immagini, evitando spostamenti del layout durante il caricamento.
Esempi
Dimensioni della miniatura video
Una miniatura video in formato 16:9 larga 1280 pixel deve essere alta 720 pixel.
Individuare il rapporto dello schermo
2560×1600 si semplifica in 8:5, equivalente a 16:10, un formato comune sui laptop.
Ritaglio verticale per i social media
Con un rapporto 4:5 e una larghezza di 1080, l’altezza è 1350: un formato verticale accettato da molti feed.
Domande frequenti
16:9 equivale a 1,78:1?
Sì. 16 ÷ 9 ≈ 1,778, quindi indicano la stessa proporzione. I formati cinematografici sono spesso espressi con numeri decimali, come 2,39:1.
Perché il risultato contiene decimali?
Non tutte le larghezze sono divisibili esattamente per il rapporto. Attiva l’arrotondamento per ottenere dimensioni in pixel interi: il risultato sarà il pixel intero più vicino, quindi potrebbe discostarsi di una frazione di pixel dal rapporto esatto.
La proprietà CSS aspect-ratio funziona ovunque?
È supportata da tutti i principali browser attuali. Se per un elemento sono impostate esplicitamente sia la larghezza sia l’altezza, questi valori hanno la precedenza su aspect-ratio.
Privacy
Tutti i calcoli vengono eseguiti nel browser. Non viene inviato né salvato nulla.