Calcolatore di Rapporto d'Aspetto — Dimensioni Responsive
Calcola dimensioni mancanti dai rapporti d'aspetto con il nostro Calcolatore di Rapporto d'Aspetto. Genera codice CSS per media responsive con proprietà moderna aspect-ratio o tecnica legacy padding-bottom. Perfetto per immagini responsive, embed video e design di layout con preset comuni come 16:9, 4:3, 21:9 e altro.
Funzionalità
- Calcolare larghezza o altezza mancante dal rapporto d'aspetto
- Preset di rapporti comuni (16:9, 4:3, 21:9, 1:1, ecc.)
- Generatore del trucco CSS padding-bottom
- Formati di rapporto multipli (rapporto, decimale, percentuale)
- Calcolatore di dimensioni per immagini responsive
- Calcolo in tempo reale
- Elaborazione 100% lato client
Rapporti d'Aspetto Comuni
- 16:9 — Video HD standard, YouTube, schermi moderni
- 4:3 — TV classica, monitor più vecchi
- 21:9 — Monitor ultrawide, cinematografico
- 1:1 — Quadrato (post Instagram)
- 9:16 — Video verticale (Instagram Stories, TikTok)
Casi d'Uso Comuni
- Immagini Responsive: Mantenere il rapporto d'aspetto durante il ridimensionamento delle immagini
- Incorporamenti Video: Calcolare le dimensioni iframe per YouTube, Vimeo
- Rapporto d'Aspetto CSS: Generare il trucco padding-bottom per browser più vecchi
- Ridimensionamento Immagine: Calcolare le dimensioni di ritaglio o ridimensionamento
- Design di Layout: Pianificare layout a griglia responsive
Tecniche CSS di Rapporto d'Aspetto
Approccio moderno (CSS aspect-ratio):
.container { aspect-ratio: 16 / 9; width: 100%;
}Approccio legacy (trucco padding-bottom):
.container { position: relative; width: 100%; padding-bottom: 56.25%; /* 16:9 = 9/16 = 56.25% */
}
.container > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}Risorse Utili
Wikipedia: Aspect Ratio Introduzione accessibile per principianti sui rapporti d'aspetto in immagini e video
MDN: Proprietà CSS aspect-ratio Proprietà CSS moderna per mantenere i rapporti d'aspetto
Smashing Magazine: Aspect Ratio in CSS Guida completa per mantenere i rapporti d'aspetto in CSS moderno
W3C CSS Box Sizing Module Specifica ufficiale per CSS aspect-ratio
Nuova Proprietà CSS Aspect-Ratio Guida Google web.dev sul trattamento moderno del rapporto d'aspetto