Calcolatore di Aspect Ratio

Calcolatore di aspect ratio per immagini e video — calcola larghezza o altezza mantenendo le proporzioni, determina il rapporto di qualsiasi immagine, ottieni il codice CSS pronto e controlla le barre di letterbox. Gratis, senza registrazione.

:

Comuni

Social media

Stampa e carta

Cinema e video

1920 × 1080
Rapporto delle dimensioni: 16:9

Larghezza (px)

1920

Altezza (px)

1080

Megapixel

2.07

Codice pronto all'uso

CSS aspect-ratio:
aspect-ratio: 16 / 9;
HTML <img> (anti-CLS):
<img src="..." width="1920" height="1080" alt="">
CSS iframe responsive:
.embed { position: relative; width: 100%; padding-bottom: 56.25%; } .embed > iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

Scarica guida PNG

Genera un'immagine PNG nel rapporto esatto selezionato, pulita e senza segni. Utile come modello di inquadratura o base di design. Il lato più lungo è 2048px.

Informazioni su questo strumento

Calcolatore di aspect ratio online e gratuito per chi lavora con video, design e sviluppo web. Lo strumento risolve la proporzione tra un rapporto (16:9, 4:3, 1:1, 21:9 e decine di altri) e i campi larghezza e altezza: inserisci una dimensione e l'altra viene calcolata all'istante, mantenendo intatto il rapporto dell'immagine. È anche possibile determinare il rapporto di qualsiasi risoluzione esistente — basta indicare larghezza e altezza e lo strumento riduce automaticamente alla forma minima. Oltre al calcolo, genera il codice CSS pronto da incollare, mostra un'anteprima in tempo reale e calcola le barre di letterbox per sapere quanta barra nera rimane quando si adatta un contenuto in un contenitore di rapporto diverso. Tutto funziona nel browser, senza registrazione.

Funzionalità

Calcola larghezza o altezza mantenendo il rapporto
Decine di preset per contesto: social media, cinema e stampa
Genera codice CSS aspect-ratio, attributi immagine anti-CLS e iframe responsive
Calcolo di letterbox e pillarbox per l'adattamento nei contenitori
Scarica una guida PNG nel rapporto esatto e anteprima in tempo reale

Come funziona il calcolo dell'aspect ratio

Un aspect ratio è la relazione tra larghezza e altezza, scritta come due numeri separati da due punti. In 16:9, ad esempio, per ogni 16 unità di larghezza ci sono 9 di altezza. Il calcolo è una semplice proporzione: l'altezza si ricava da larghezza × (9 ÷ 16) e la larghezza da altezza × (16 ÷ 9). Per determinare il rapporto di qualsiasi immagine, si dividono larghezza e altezza per il loro massimo comun divisore, che riduce, ad esempio, 1920×1080 alla forma minima 16:9. È lo stesso principio che il calcolatore applica per mantenere qualsiasi ridimensionamento senza distorsione.

Casi d'uso

Gli usi più comuni del calcolatore di aspect ratio nella routine quotidiana di chi produce contenuti visivi e codice sono:

  • Montaggio ed esportazione videoConvertire un master 4K in HD, configurare le risoluzioni di output e trovare l'altezza corretta di un ritaglio widescreen senza deformare l'immagine.
  • Banner e layout responsiveDefinire l'altezza di un banner a partire da una larghezza fissa e generare il CSS aspect-ratio che mantiene le proporzioni su qualsiasi schermo.
  • Contenuti per i social mediaOttenere Story 9:16 (1080×1920px), feed Instagram 4:5 (1080×1350px) e miniatura YouTube 16:9 (1280×720px) prima di esportare, evitando ritagli indesiderati alla pubblicazione.
  • Video incorporato responsiveGenerare il modello di iframe con padding proporzionale per incorporare player video che si adattano alla larghezza del contenitore.
  • Performance e Core Web VitalsCompilare gli attributi width e height delle immagini per riservare spazio nel layout e ridurre lo spostamento cumulativo (CLS).
  • Stampa e impaginazioneCalcolare dimensioni proporzionali per A4, foto e materiali stampati a partire da una misura nota.

Come Usare

1

Scegli il rapporto

Inserisci i due numeri del rapporto o fai clic su uno dei preset organizzati per contesto. L'anteprima e il codice si aggiornano all'istante.

2

Indica una dimensione

Compila la larghezza o l'altezza. Il campo opposto viene calcolato automaticamente mantenendo il rapporto scelto.

3

Copia il codice

Usa i pulsanti di copia per trasferire il CSS aspect-ratio, gli attributi immagine o l'iframe responsive direttamente nel tuo progetto.

4

Controlla il letterbox (opzionale)

Attiva il calcolo delle barre, indica le dimensioni del contenitore e vedi quanta barra nera rimane adattando il contenuto.

Domande Frequenti

Cosa significa aspect ratio?

L'aspect ratio, o rapporto d'aspetto, è la relazione tra larghezza e altezza di un'immagine, video o schermo. Si scrive come due numeri separati da due punti, come 16:9 o 4:3. Il primo numero rappresenta la larghezza proporzionale e il secondo l'altezza. Un rapporto 16:9 non indica la dimensione reale in pixel, solo che la larghezza è sempre 16/9 volte l'altezza, che si tratti di un video 1280×720 o 3840×2160.

Come calcolo l'altezza dalla larghezza mantenendo il rapporto?

Basta moltiplicare la larghezza per l'altezza del rapporto e dividere per la larghezza del rapporto. Per una larghezza di 1200px in 16:9, il calcolo è 1200 × 9 ÷ 16, che dà 675px di altezza. Il calcolatore lo fa automaticamente: scegli il rapporto, inserisci la larghezza e l'altezza appare già calcolata. Il percorso inverso, trovare la larghezza dall'altezza, segue la stessa logica invertendo i termini.

Qual è la differenza tra 16:9, 4:3 e 21:9?

Sono rapporti con formati diversi. Il 4:3 è quasi quadrato, lo standard delle vecchie TV e monitor. Il 16:9 è il widescreen attuale, usato in quasi tutti i video online, in TV e sui telefoni in orizzontale. Il 21:9 è l'ultrawide, più allungato, comune nei monitor da produttività e nei film con un'atmosfera cinematografica. Maggiore è la differenza tra i due numeri, più allungata e panoramica risulta l'immagine.

Cosa sono letterbox e pillarbox?

Sono le barre nere che appaiono quando un contenuto viene visualizzato in uno spazio di rapporto diverso, senza tagliare nulla. Il letterbox sono le barre orizzontali in alto e in basso, comuni guardando un film widescreen su uno schermo più quadrato. Il pillarbox sono le barre verticali ai lati, che appaiono visualizzando un video più quadrato su uno schermo widescreen. Il calcolatore indica esattamente quanti pixel di barra rimangono in ogni caso.

Come uso aspect-ratio nel CSS?

La proprietà CSS aspect-ratio riserva lo spazio di un elemento nel rapporto desiderato senza dover fissare l'altezza. Per un blocco 16:9, basta scrivere aspect-ratio: 16 / 9 e il browser calcola l'altezza dalla larghezza disponibile. È il modo moderno di mantenere proporzioni responsive e sostituisce il vecchio trucco del padding-bottom percentuale. Il calcolatore genera questa riga già con i valori del rapporto selezionato.

Vedi anche