CSS max-width
La proprietà CSS3 max-width imposta la larghezza massima di un elemento
La proprietà max-width in CSS3 è utile per evitare che un elemento si allarghi oltre una certa dimensione. In combinazione con width: 100%, consente di creare layout flessibili che si adattano allo spazio disponibile, ma senza mai superare il valore definito da max-width.
Sintassi
Significato dei valori principali:
-
none: Valore predefinito. Nessun limite massimo alla larghezza dell'elemento.
-
lunghezza: Imposta una larghezza massima usando unità come
px,em,rem, ecc. Esempio:max-width: 600px; -
percentuale (%): Limita la larghezza in relazione al contenitore padre. Esempio:
max-width: 100%; -
inherit: L'elemento eredita il valore della proprietà dal suo elemento genitore.
Esempio proprietà: max-width
Codice Esempio: max-width
.max-width-example {
width: 100%;
max-width: 600px;
padding: 20px;
margin: auto;
border: 2px solid #50a14f;
background-color: #fef9e7;
font-size: 18px;
border-radius: 10px;
text-align: center;
}
Contenuto Esempio: max-width
Esempio di utilizzo di max-width
In questo esempio, l'elemento ha una larghezza impostata al 100%, ma con un limite massimo di 500px, così da adattarsi meglio ai vari schermi:
CSS e HTML per un contenitore con larghezza massima:
<style>
.max-width-example {
width: 100%;
max-width: 500px;
padding: 20px;
margin: auto;
border: 2px solid #50a14f;
background-color: #fef9e7;
font-size: 18px;
border-radius: 10px;
text-align: center;
}
</style>
<div class="max-width-example">
Questo contenitore non supererà mai i 500px di larghezza...
</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.118
