Aspect Ratio Calculator

Calcolatore · output CSS · responsive

L’Aspect Ratio Calculator calcola larghezza e altezza in pixel a partire da un rapporto (es. 16:9, 4:5), genera snippet CSS con aspect-ratio e con il trucco del padding-top per compatibilità, e offre una tabella di altezze per larghezze comuni. Utile in Figma per frame e export, e in sviluppo per card, immagini e video responsive.

Rapporto d'aspetto
Dimensioni
larghezza (px)
altezza (px)
Unità:
Blocca rapporto durante il ridimensionamento
Dimensioni comuni (dato il rapporto)
Larghezza contenitore

Calcola l'altezza per contenitori tipici

16 : 9

                                        


                                        

                                            

                                        


                                        

                                            

                                                
Come gestire l'aspect ratio in CSS
Metodo moderno: la proprietà aspect-ratio è supportata dai browser recenti ed è la scelta corretta per i nuovi progetti.
.box {
  width: 100%;
  aspect-ratio: 16 / 9;
}
Metodo legacy: il padding-top percentuale è calcolato sulla larghezza del contenitore: si usa per forzare un rapporto quando aspect-ratio non è disponibile.
.wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.inner {
  position: absolute;
  inset: 0;
}
WordPress: per immagini da ACF o thumbnail, combina aspect-ratio con object-fit: cover per un ritaglio pulito.
.card-image img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  display: block;
}
Per iframe video (YouTube, Vimeo) con requisiti molto legacy valuta ancora il padding-top con position: absolute; per il resto preferisci aspect-ratio.
                                            

                                        

                                    

                                

                            

                        

                    


                    

                        
Perché usare un calcolatore di aspect ratio

                        
  • Figma e frame: imposti il rapporto del frame e ottieni subito le coppie larghezza/altezza coerenti con il CSS.
  • CSS pronto: snippet con aspect-ratio, trucco padding-top e variabili in :root per temi WordPress.
  • Responsive: tabella di altezze per breakpoint comuni e anteprima proporzioni.
Strumenti affini: Spacing Scale Generator e Design Token Formatter.