Propriété max-width

La propriété max-width définit la largeur maximale d'un élément. Les valeurs de cette propriété peuvent être n'importe quelle unité de mesure ou le mot-clé none, qui signifie l'absence de valeur.

Cette propriété est généralement définie pour un élément avec une largeur fluide (la largeur est définie en pourcentages ou n'est pas définie du tout, et l'élément s'étend en largeur par son contenu). Si la largeur de l'élément est définie en pourcentages - lors de l'agrandissement de la fenêtre du navigateur, elle augmentera jusqu'à atteindre la valeur de max-width.

Syntaxe

sélecteur {
	max-width: valeur;
}

Exemple

Dans cet exemple, la largeur est un pourcentage de la largeur du parent. Augmentez la largeur de la fenêtre du navigateur, et le conteneur s'agrandira également pour s'adapter à la largeur de la fenêtre du navigateur. Cependant, il ne s'agrandira que jusqu'à la valeur définie dans max-width, c'est-à-dire 900px. Dès que le conteneur atteint cette largeur - il cesse de s'agrandir :

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

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

Exemple

Dans cet exemple, la largeur du conteneur est limitée des deux côtés : il ne pourra pas devenir plus grand que 900px et plus petit que 400px :

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

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

Voir aussi

la propriété min-width,
qui définit la largeur minimale d'un élément
la propriété max-height,
qui définit la hauteur maximale d'un élément
la propriété min-height,
qui définit la hauteur minimale d'un élément