Aspect Ratio Calculator

Calcolatore · output CSS · responsive

Inserisci larghezza e altezza e ottieni il rapporto semplificato, le dimensioni ridimensionate e il codice CSS. Sintassi modern aspect-ratio e padding-top per compatibilità estesa.

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.
                                            

                                        

                                    

                                

                            

                        

                    


                    

                        
Il rapporto d'aspetto è fondamentale nella costruzione di layout responsive: immagini, video, card e hero section devono mantenere le proporzioni corrette su ogni dispositivo. La moderna proprietà CSS aspect-ratio ha sostituito il vecchio hack del padding-top percentuale, ma conoscere entrambi è necessario per garantire compatibilità.
Questo calcolatore:
  • Calcola il rapporto d'aspetto semplificato (es. 1920×1080 → 16:9)
  • Calcola le dimensioni proporzionali dato un vincolo
  • Genera il codice CSS con aspect-ratio: 16/9
  • Genera il padding-top percentuale equivalente
  • Utile per container video YouTube/Vimeo embedded
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.