Calcolatore di Proporzioni — Rapporto d'aspetto e dimensioni responsive

Funzionalità

• Calcolare larghezza o altezza mancante dal rapporto d'aspetto
• Preset di rapporti comuni (16:9, 4:3, 21:9, 1:1, ecc.)
• Generatore di codice CSS (aspect-ratio e trucco padding-bottom)
• Formati di rapporto multipli (rapporto, decimale, percentuale)
• Calcolatore di dimensioni per immagini responsive
• Calcolo in tempo reale
• Elaborazione 100% lato client

Casi d'uso comuni

• Immagini responsive: mantenere il rapporto d'aspetto durante il ridimensionamento delle immagini
• Video incorporati: calcolare le dimensioni degli iframe per YouTube e Vimeo
• Rapporto d'aspetto in CSS: generare il trucco padding-bottom per i browser più vecchi
• Ridimensionamento immagini: calcolare le dimensioni di ritaglio o ridimensionamento
• Design del layout: pianificare layout a griglia responsive

Tecniche CSS per il 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