Cerca articoli della Knowledge Base

Aspect-ratio per Proporzioni Fisse

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

    Introduzione al CSS Il CSS (Cascading Style Sheets) è il linguaggio utilizzato per definire lo stile...

  • Selettori Css di Base

    Selettori Css di Base I selettori CSS permettono di identificare gli elementi HTML a cui applicare g...

  • Proprietà color e background

    Proprietà color e background Le proprietà color e background sono fondamentali per definire l'aspett...

  • Margin e Padding

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

  • Box Model CSS

    Box Model CSS Il Box Model è il concetto fondamentale che descrive come ogni elemento HTML è rappres...