CSS aspect-ratio
La proprietà CSS aspect-ratio (CSS4) imposta un rapporto fisso tra larghezza e altezza
La proprietà aspect-ratio consente di mantenere proporzioni costanti per un elemento, come 16:9, 4:3 o 1:1. È molto utile per layout responsive, video container, immagini o qualsiasi elemento che debba mantenere un rapporto proporzionale indipendentemente dalle dimensioni del viewport.
Sintassi
Significato dei valori principali:
-
width / height: Specifica il rapporto tra larghezza e altezza, ad esempio
16 / 9,4 / 3,1 / 1. Le unità sono relative tra loro (non richiedonopxo%). -
auto: Usa il rapporto implicito derivato dal contenuto o da altre regole CSS, se disponibili.
Esempio proprietà: aspect-ratio
Codice Esempio: aspect-ratio
.aspect-ratio-box {
width: 100%;
max-width: 600px;
aspect-ratio: 16 / 9;
background-color: #a8dadc;
border: 4px solid #1d3557;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: #1d3557;
text-align: center;
}
Contenuto Esempio: aspect-ratio
Esempio di utilizzo di aspect-ratio
In questo esempio, un contenitore mantiene un rapporto fisso di 16:9 indipendentemente dalla sua larghezza:
CSS e HTML per il box con aspect-ratio fisso:
<style>
.aspect-ratio-box {
width: 100%;
max-width: 600px;
aspect-ratio: 16 / 9;
background-color: #a8dadc;
border: 4px solid #1d3557;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: #1d3557;
text-align: center;
}
</style>
<div class="aspect-ratio-box">
Box con aspect-ratio 16:9
</div>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 216.73.216.108
