Calcolatore Aspect Ratio: Capire i rapporti larghezza-altezza

Padroneggia i rapporti di aspetto per video, immagini e design responsive. Calcola le dimensioni con precisione per qualsiasi schermo.

5 min di lettura Conversione · CSS · Video 6 sezioni + FAQ

Il rapporto di aspetto e la relazione proporzionale tra larghezza e altezza. 16:9 e il linguaggio universale degli schermi moderni.

Comprendere i rapporti di aspetto previene gli errori di layout piu comuni: immagini deformate, video con bande nere e container responsive rotti.

Cos'e' il rapporto di aspetto

Un rapporto di aspetto esprime la relazione proporzionale tra larghezza e altezza come due interi separati da due punti. 16:9 significa che per ogni 16 unita di larghezza ci sono 9 unita di altezza.

Tool gratuito Calcolatore Aspect Ratio Calcola le dimensioni e converti tra rapporti di aspetto istantaneamente

Rapporti comuni (16:9, 4:3, 9:16, 1:1, 21:9)

16:9 (widescreen) e lo standard per video HD e YouTube. 4:3 e il vecchio standard televisivo. 9:16 e il ritratto mobile per Instagram Stories e TikTok. 1:1 e quadrato per i feed Instagram. 21:9 per cinema.

Calcolare le dimensioni

Per calcolare l'altezza da larghezza e rapporto: altezza = larghezza per (altezza_rapporto / larghezza_rapporto). Per 16:9 a 1280px di larghezza: altezza = 1280 per (9/16) = 720px.

Tool gratuito Convertitore Unità CSS Converti tra px, rem, em, vh, vw e altro

Proprieta CSS aspect-ratio

La proprieta CSS aspect-ratio impone il dimensionamento proporzionale: aspect-ratio: 16 / 9 fa si che un elemento mantenga un rapporto 16:9 al variare della larghezza.

Immagini e video responsive

Per gli embed video responsive, avvolgi l'iframe in un container con aspect-ratio: 16/9 e imposta width: 100%, height: auto sull'iframe.

Formati social media

Ogni piattaforma ha rapporti preferiti: Facebook feed 1.91:1, Instagram feed 4:5 o 1:1, Instagram Story 9:16, YouTube thumbnail 16:9, TikTok 9:16.

Tool gratuito Convertitore PX in REM Converti valori pixel in unità rem per il design responsive

Domande frequenti

Qual e il rapporto di aspetto piu comune per i video? +
16:9 e lo standard per i video HD e 4K moderni, utilizzato da YouTube, Netflix e la maggior parte delle piattaforme streaming.
Come si calcola l'altezza da larghezza e rapporto di aspetto? +
Dividi il secondo numero del rapporto per il primo, poi moltiplica per la larghezza. Per 16:9 a 1920px: 9/16 per 1920 = 1080px.
Cos'e la proprieta CSS aspect-ratio? +
La proprieta CSS aspect-ratio imposta un rapporto di aspetto preferito per un elemento. Esempio: aspect-ratio: 16 / 9.
Qual e il miglior rapporto di aspetto per Instagram? +
Per i post del feed, 4:5 e consigliato. Per Stories e Reels, usa 9:16 (verticale).
Qual e la differenza tra 16:9 e 16:10? +
16:10 e leggermente piu alto di 16:9. Era comune nei laptop nei primi anni 2000.
Come mantengo il rapporto di aspetto in CSS responsive senza la proprieta aspect-ratio? +
Usa il trucco padding-top percentuale: imposta position: relative sul container, padding-top al valore percentuale del rapporto.
Perche alcuni monitor usano il 21:9? +
21:9 (ultrawide) fornisce un campo visivo piu ampio, utile per gaming, video editing e multitasking.