Eigenschaft max-width

Die Eigenschaft max-width legt die maximale Breite eines Elements fest. Als Werte für die Eigenschaft dienen beliebige Einheiten für Größen oder das Schlüsselwort none, was das Fehlen eines Wertes bedeutet.

Normalerweise wird die Eigenschaft für ein Element mit fließender Breite festgelegt (die Breite ist in Prozent angegeben oder überhaupt nicht festgelegt, und das Element wird in der Breite durch seinen Inhalt aufgeweitet). Wenn die Breite des Elements in Prozent angegeben ist - wird sie bei Vergrößerung des Browserfensters zunehmen, bis sie den Wert von max-width erreicht.

Syntax

Selektor {
	max-width: Wert;
}

Beispiel

In diesem Beispiel beträgt die Breite einen Prozentsatz der Breite des Elternelements. Vergrößern Sie das Browserfenster in der Breite, und der Container wird sich ebenfalls vergrößern, um sich der Breite des Browserfensters anzupassen. Allerdings wird er sich nur bis zu der in max-width definierten Größe vergrößern, das sind 900px. Sobald der Container diese Breite erreicht hat, wird er sich nicht weiter vergrößern:

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

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

Beispiel

In diesem Beispiel ist die Breite des Containers auf beiden Seiten begrenzt: Er kann nicht größer als 900px und nicht kleiner als 400px werden:

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

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

Siehe auch

die Eigenschaft min-width,
die die minimale Breite eines Elements festlegt
die Eigenschaft max-height,
die die maximale Höhe eines Elements festlegt
die Eigenschaft min-height,
die die minimale Höhe eines Elements festlegt