Calcolatore di Proporzioni (mantieni le proporzioni nel

Cosa sono le proporzioni

Le proporzioni descrivono la larghezza rispetto all'altezza: 16:9 significa 16 unità di larghezza per ogni 9 di altezza. Lo stesso rapporto funziona a qualsiasi dimensione — 1920×1080 e 800×450 sono entrambe 16:9. Mantenere le proporzioni nel ridimensionamento evita immagini stirate o schiacciate ed è alla base del design responsive.

Accettiamo numeri interi (16:9) o decimali (1,78:1) per il rapporto, e qualsiasi dimensione per larghezza/altezza. Modifica qualsiasi campo — gli altri si aggiornano per mantenere il rapporto. Il rapporto decimale (larghezza / altezza) è mostrato per l'uso nelle espressioni CSS calc() o negli strumenti di video editing.

Proporzioni comuni e dove vengono usate

16:9 — HDTV moderna, monitor per computer, YouTube, la maggior parte dei film dal 2009. Il default per quasi tutto ciò che fai oggi.

9:16 — video verticale per Instagram Stories, TikTok, YouTube Shorts. Il lato opposto del 16:9 per i contenuti mobile-first.

1:1 — quadrato. Default del feed Instagram fino al 2021. Copertine di album, foto profilo.

4:3 — vecchi televisori e monitor prima dell'HD. Ancora usato per alcuni contenuti in stile classico.

3:2 — default delle fotocamere DSLR. Pellicola 35mm. Stampe di grandi dimensioni.

21:9 — cinematografico ultra-wide. Film girati in anamorfico. Alcuni monitor PC e TV LG.

Perché l'aspect-ratio in CSS è importante

Il CSS moderno ha aspect-ratio: 16/9; — imposta il rapporto e lascia che il browser calcoli l'altezza dalla larghezza (o viceversa). Evita il vecchio trucco del padding-bottom ed è fondamentale per gli embed responsive e i segnaposto delle immagini per evitare il layout shift.

Il Cumulative Layout Shift (CLS) è un Core Web Vital. Video incorporati, immagini senza dimensioni e annunci possono causare CLS — risolvilo impostando larghezza/altezza esplicite (che il browser usa per calcolare le proporzioni) o usando CSS aspect-ratio.