Proprietà aspect-ratio CSS

Definizione e uso

aspect-ratio Questa proprietà ti permette di definire il rapporto tra la larghezza e l'altezza dell'elemento.

Se impostato aspect-ratio e width L'altezza verrà regolata in base al rapporto di aspect ratio definito.

Per meglio comprendere aspect-ratio Vedi la dimostrazione.

Suggerimento:Utilizzo in layout reattivo aspect-ratio Questa proprietà, quando la dimensione dell'elemento cambia frequentemente, desideri mantenere la proporzionalità tra larghezza e altezza.

Esempio

Esempio 1

Aggiungi un rapporto di aspetto all'elemento:

div {
  aspect-ratio: 3 / 2;
}

Prova tu stesso

Esempio 2

Se la dimensione degli elementi div deve cambiareaspect-ratio Questa proprietà è particolarmente adatta a controllare il rapporto di aspetto degli elementi div. Ad esempio, in una galleria di immagini, si desidera che la dimensione degli elementi div sia flessibile per adattarsi a tutti i dispositivi, ma allo stesso tempo mantenere il rapporto di aspetto delle immagini:

#container > div {
  aspect-ratio: 3/2;
}
<div id="container">
  <div>alley</div>
  <div>flowers by the street</div>
  <div>mountains</div>
  <div>Cinque Terre</div>
</div>

Prova tu stesso

Sintassi CSS

aspect-ratio: number/number|initial|inherit;

Valore dell'attributo

Dettagli tecnici

Supporto del browser

I numeri nella tabella rappresentano la versione del browser che supporta completamente l'attributo.

Pagine correlate

Guida:Modulo di layout a griglia CSS

Riferimento:Proprietà Object-fit CSS

Riferimento:Proprietà Object-position CSS