Proprietà max-width

La proprietà max-width imposta la larghezza massima di un elemento. I valori accettati dalla proprietà sono qualsiasi unità di misura per le dimensioni oppure la parola chiave none, che indica l'assenza di un valore.

Di solito la proprietà viene impostata per un elemento con larghezza fluida (la larghezza è impostata in percentuale o non è impostata affatto, e l'elemento si espande in larghezza in base al suo contenuto). Se la larghezza di un elemento è impostata in percentuale, all'aumentare della finestra del browser, essa aumenterà finché non raggiunge il valore di max-width.

Sintassi

selettore {
	max-width: valore;
}

Esempio

In questo esempio la larghezza è una percentuale della larghezza del genitore. Aumenta la larghezza della finestra del browser, e il contenitore si allargherà a sua volta per adattarsi alla larghezza della finestra del browser. Tuttavia, si espanderà solo fino alla dimensione definita in max-width, che è 900px. Non appena il contenitore raggiunge questa larghezza - smetterà di espandersi:

<div id="elem"></div>

#elem {
	width: 70%;
	max-width: 900px;
	height: 300px;
	border: 1px solid black;
}

Esempio

In questo esempio la larghezza del contenitore è limitata da entrambi i lati: non potrà diventare più grande di 900px e più piccolo di 400px:

<div id="elem"></div>

#elem {
	width: 70%;
	max-width: 900px;
	min-width: 400px;
	height: 300px;
	border: 1px solid black;
}

Vedi anche

la proprietà min-width,
che imposta la larghezza minima di un elemento
la proprietà max-height,
che imposta l'altezza massima di un elemento
la proprietà min-height,
che imposta l'altezza minima di un elemento