Calcolatrice di Aspect Ratio

Calcolatrice di aspect ratio per immagini e video — calcola larghezza o altezza mantenendo le proporzioni, determina il rapporto di qualsiasi immagine, ottieni codice CSS pronto all'uso e verifica le bande nere. 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 per iframe responsive:
.embed { position: relative; width: 100%; padding-bottom: 56.25%; } .embed > iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

Scarica la guida PNG

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

Informazioni su questo strumento

Calcolatrice di aspect ratio online gratuita 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: digita una dimensione e l'altra viene calcolata all'istante, mantenendo intatto il rapporto. Determina anche il rapporto di qualsiasi immagine che possiedi già, fornisce codice CSS pronto da incollare, mostra un'anteprima che si ridimensiona in tempo reale e calcola le bande nere così da sapere quanta banda resta quando adatti il contenuto a un contenitore con un 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 ai contenitori
Scarica una guida PNG nel rapporto esatto, più un'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 dai due punti. In 16:9, per ogni 16 unità di larghezza ce ne sono 9 di altezza. Il calcolo è una semplice proporzione: l'altezza si ottiene da larghezza × (9 ÷ 16) e la larghezza da altezza × (16 ÷ 9). Per determinare il rapporto di un'immagine qualsiasi si dividono la sua larghezza e altezza per il massimo comune divisore tra le due, il che riduce ad esempio 1920×1080 alla sua forma più semplice 16:9. È lo stesso principio che la calcolatrice applica per mantenere ogni ridimensionamento privo di distorsioni.

Casi d'Uso

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

  • Montaggio ed esportazione videoConverti un master 4K in HD, imposta le risoluzioni di output e trova l'altezza corretta di un ritaglio widescreen senza distorcere l'immagine.
  • Banner e layout responsiveImposta l'altezza di un banner a partire da una larghezza fissa e genera il CSS aspect-ratio che mantiene la proporzione su qualsiasi schermo.
  • Contenuti per i socialImposta correttamente Storie 9:16 (1080×1920px), feed Instagram 4:5 (1080×1350px) e miniature YouTube 16:9 (1280×720px) prima di esportare, evitando ritagli indesiderati in fase di pubblicazione.
  • Video incorporati responsiveGenera il pattern iframe con padding proporzionale per incorporare player video che si adattano alla larghezza del contenitore.
  • Performance e Core Web VitalsCompila gli attributi width e height delle immagini per riservare lo spazio nel layout e ridurre il cumulative layout shift (CLS).
  • Stampa e impaginazioneCalcola dimensioni proporzionali per A4, fotografie e materiali stampati a partire da una misura nota.

Come Usarla

1

Scegli il rapporto

Digita i due numeri del rapporto oppure clicca su uno dei preset organizzati per contesto. L'anteprima e il codice si aggiornano all'istante.

2

Inserisci 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 portare il CSS aspect-ratio, gli attributi dell'immagine o l'iframe responsive direttamente nel tuo progetto.

4

Verifica le bande nere (opzionale)

Attiva il calcolo delle bande, inserisci la dimensione del contenitore e vedi quanta banda nera resta adattando il contenuto.

Domande Frequenti

Cosa significa aspect ratio?

Un aspect ratio è la relazione tra la larghezza e l'altezza di un'immagine, un video o uno schermo. Si scrive come due numeri separati dai due punti, ad esempio 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, ma solo che la larghezza è sempre 16/9 dell'altezza, sia in un video 1280×720 sia in uno 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. La calcolatrice lo fa automaticamente: scegli il rapporto, digiti 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 forme diverse. Il 4:3 è quasi quadrato, lo standard delle vecchie TV e dei vecchi monitor. Il 16:9 è l'attuale widescreen, usato in quasi tutti i video online, in TV e sui telefoni tenuti in orizzontale. Il 21:9 è ultrawide, più allungato, comune sui monitor da produttività e nei film dal taglio cinematografico. Maggiore è la differenza tra i due numeri, più l'immagine risulta allungata e panoramica.

Cosa sono letterbox e pillarbox?

Sono le bande nere che compaiono quando un contenuto viene mostrato in uno spazio con un rapporto diverso, senza ritagliare nulla. Il letterbox è costituito dalle bande orizzontali sopra e sotto, comuni quando si guarda un film widescreen su uno schermo più quadrato. Il pillarbox è costituito dalle bande verticali ai lati, che compaiono mostrando un video più quadrato su uno schermo widescreen. La calcolatrice ti dice esattamente quanti pixel di banda restano in ciascun caso.

Come uso aspect-ratio in 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 in percentuale. La calcolatrice genera questa riga già con i valori del rapporto selezionato.

Lettura consigliata:Rapporto d'aspetto (immagine)

Vedi anche