Proprietà aspect-ratio
La proprietà aspect-ratio imposta l'allineamento
degli elementi lungo l'asse trasversale per i blocchi flex
e lungo l'asse orizzontale per le griglie.
Si applica all'elemento
genitore.
Sintassi
selettore {
aspect-ratio: auto o rapporto;
}
Valori
| Valore | Descrizione |
|---|---|
auto |
L'elemento non ha un rapporto d'aspetto preferito e il browser lo imposta automaticamente, in base alla larghezza e all'altezza dell'elemento. |
rapporto |
Il rapporto è scritto nella forma 16/9,
dove il primo numero è la larghezza, e il secondo
numero - l'altezza. Se un valore non è
specificato, è considerato uguale a 1. Inoltre
alcuni rapporti possono essere scritti
con un solo numero. Ad esempio, 2/1 può essere scritto
come 0.5, questo darà lo stesso risultato. |
auto && rapporto |
Se il rapporto d'aspetto è insieme
alla parola chiave auto (esempio: auto 1/2),
verrà scelto il rapporto specificato,
ma per gli elementi sostituibili (come
immagini e video) con il proprio rapporto d'aspetto
verrà utilizzato solo quest'ultimo. |
Esempio
Impostiamo il rapporto d'aspetto automatico per il pulsante:
<p>
<button>Click</button>
</p>
button {
aspect-ratio: auto;
background-color: #9DDFA4;
padding: 1em;
}
:
Esempio
Ora impostiamo il rapporto d'aspetto per il pulsante
come 1/2:
<p>
<button>Click</button>
</p>
button {
aspect-ratio: 1/2;
background-color: #9DDFA4;
padding: 1em;
}
:
Vedi anche
-
la proprietà
object-fit,
che ridimensiona gli elementi
