Cerca articoli della Knowledge Base

Aspect-ratio per proporzioni fisse

La proprietà aspect-ratio mantiene le proporzioni di un elemento.

Sintassi

.video-container {
  aspect-ratio: 16 / 9; /* Proporzione video HD */
  width: 100%;
}

.square {
  aspect-ratio: 1 / 1; /* Quadrato perfetto */
  /* oppure */
  aspect-ratio: 1;
}

Proporzioni comuni

  • 16/9 - Video widescreen
  • 4/3 - Video classico
  • 1/1 - Quadrato (Instagram)
  • 9/16 - Stories/Reels verticali
  • 21/9 - Ultrawide

Card con immagine proporzionata

.card-image {
  aspect-ratio: 3/2;
  width: 100%;
  object-fit: cover;
}

Hai trovato utile quest'articolo?

Articoli Correlati

  • Introduzione al CSS

    Il CSS (Cascading Style Sheets) è il linguaggio utilizzato per definire lo stile e la presentazione ...

  • Selettori CSS di base

    I selettori CSS permettono di identificare gli elementi HTML a cui applicare gli stili.Tipi di selet...

  • Proprietà color e background

    Le proprietà color e background sono fondamentali per definire l'aspetto visivo degli elementi.Propr...

  • Margin e Padding

    Margin e Padding controllano lo spazio intorno e dentro gli elementi.Differenza chiaveMargin: spazio...

  • Box Model CSS

    Il Box Model è il concetto fondamentale che descrive come ogni elemento HTML è rappresentato come un...