Eigenschap max-width

De eigenschap max-width stelt de maximale breedte van een element in. De waarde van de eigenschap zijn elk van de eenheden voor afmetingen of het sleutelwoord none, wat betekent dat er geen waarde is.

Meestal wordt de eigenschap ingesteld voor een element met een vloeiende breedte (de breedte is ingesteld in procenten of niet ingesteld, en het element wordt in breedte uitgerekt door zijn inhoud). Als de breedte van het element is ingesteld in procenten - bij het vergroten van het browservenster zal het toenemen, totdat het de waarde max-width bereikt.

Syntaxis

selector {
	max-width: waarde;
}

Voorbeeld

In dit voorbeeld is de breedte een percentage van de breedte van de ouder. Vergroot het browservenster in de breedte, en de container zal ook vergroten, om zich aan te passen aan de breedte van het browservenster. Echter, het zal alleen vergroten tot de grootte gedefinieerd in max-width, dit is 900px. Zodra de container deze breedte bereikt - zal het stoppen met vergroten:

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

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

Voorbeeld

In dit voorbeeld is de breedte van de container beperkt aan beide kanten: het kan niet groter worden dan 900px en kleiner dan 400px:

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

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

Zie ook

de eigenschap min-width,
die de minimale breedte van een element instelt
de eigenschap max-height,
die de maximale hoogte van een element instelt
de eigenschap min-height,
die de minimale hoogte van een element instelt