Aspect Ratio
Calcola e mantieni i rapporti di aspetto per immagini, video e schermi.
① Inserisci larghezza e altezza ② O scegli un preset ③ Copia il CSS
Standard
Social
Rapporto personalizzato:
16:9
Rapporto di aspetto
16:9
Dimensioni
1920×1080
Rapporto decimale
1.7778
Output CSS
aspect-ratio: 16 / 9; padding-top: 56.2500%; /* legacy fallback */ width: 1920px; height: 1080px;
Continua con
Cos'è il rapporto di aspetto e perché è importante?
Il rapporto di aspetto è la relazione proporzionale tra larghezza e altezza, espressa come L:H — ad esempio 16:9, 4:3, 1:1 o 9:16. È fondamentale per la produzione video, la fotografia e il web design responsive. Il CSS moderno gestisce i rapporti con la proprietà aspect-ratio (es. aspect-ratio: 16 / 9), sostituendo il vecchio trucco padding-top (padding-top: 56.25%). Casi d'uso comuni: thumbnail YouTube (1280×720, 16:9), post Instagram (1080×1080, 1:1), TikTok e Stories (1080×1920, 9:16), immagini Open Graph (1200×630), banner LinkedIn (1200×627).
Domande frequenti
Il rapporto di aspetto è la relazione proporzionale tra larghezza e altezza, espressa come L:H. I rapporti comuni includono 16:9 (video widescreen), 4:3 (TV/monitor tradizionale), 1:1 (quadrato), 21:9 (ultrawide) e 9:16 (video verticale).
Per trovare l'altezza da larghezza e rapporto: altezza = larghezza × (altezza rapporto ÷ larghezza rapporto). Esempio: 16:9 a 1920px → altezza = 1920 × (9 ÷ 16) = 1080px.
16:9 è lo standard per video widescreen (HD, Full HD, 4K), la maggior parte dei monitor moderni e i thumbnail di YouTube. 1920×1080 e 3840×2160 sono entrambi 16:9.
CSS moderno: `aspect-ratio: 16 / 9`. Per browser più vecchi: padding-top trick: `padding-top: 56.25%`.
Il rapporto di aspetto è una relazione proporzionale (senza dimensioni, es. 16:9). La risoluzione è il conteggio effettivo dei pixel (1920×1080).
In HTML5, usa attributi width e height su <img> per definire il rapporto intrinseco. Aggiungi max-width: 100%; height: auto in CSS.
Post Instagram: 1:1 (1080×1080). Story/Reels/TikTok: 9:16 (1080×1920). Twitter: 3:1 (1500×500). LinkedIn: 1.91:1 (1200×627). YouTube: 16:9 (1280×720). Open Graph: 1.91:1 (1200×630).