max-width |
Largeur maximum |
CSS2 |
|
Syntaxe
Paramètres
Paramètre |
Description |
paramètres |
Ce paramètre de propriété permet d'indiquer la largeur maximum : |
inherit |
Cet attribut permet d'indiquer qu'il hérite des propriétés de la balise parente. |
initial |
Cet attribut permet d'indiquer qu'il faut appliquer la valeur par défaut de cette propriété. |
largeurin |
Cet attribut permet d'indiquer que la largeur est calculé en pouce. |
largeurpt |
Cet attribut permet d'indiquer que la largeur est calculé en points. |
largeurpx |
Cet attribut permet d'indiquer que la largeur est calculé en pixels. |
pourcentage% |
Cet attribut permet d'indiquer que la largeur est calculé en fonction du pourcentage d'espace disponible. |
largeur |
Cet attribut permet d'indiquer que la largeur est calculé en nombre réel (à virgule flottante). |
Description
Cette propriété permet d'indiquer la largeur maximum que doit avoir un élément.
Remarques
- Limite de la largeur d'un élément : La propriété max-width permet de définir une largeur maximale pour un élément, ce qui signifie que l'élément ne pourra
jamais dépasser cette largeur, même si son contenu tente de l'étendre. Cela est particulièrement utile pour éviter que des éléments trop larges ne perturbent la mise en page
d'une page web, surtout sur des écrans de grande taille.
- Comportement avec les valeurs de largeur flexible : Lorsque vous utilisez max-width en combinaison avec des valeurs de largeur flexibles (par exemple,
en pourcentages ou en vw pour la largeur de la fenêtre), l'élément peut se redimensionner tout en étant limité par la valeur de max-width. Cela permet de créer
des mises en page réactives s'adaptant à différentes tailles d'écran, tout en évitant que les éléments ne deviennent trop larges sur des écrans plus grands.
- Interaction avec width : Si une largeur fixe est définie pour un élément avec la propriété width, et que max-width est également définie,
max-width prendra le dessus si la largeur calculée de l'élément dépasse la valeur maximale spécifiée. Cela permet de maintenir une taille cohérente sans que l'élément ne
devienne trop large, même si la largeur définie est plus grande.
- Utilisation dans les images et les éléments multimédia : La propriété max-width est couramment utilisée pour les images et les éléments multimédia afin
de garantir qu'ils ne dépassent jamais une certaine largeur, même si la taille du conteneur ou de la fenêtre change. Par exemple, en définissant max-width: 100% pour une image,
on permet à l'image de s'adapter à la largeur de son conteneur tout en garantissant qu'elle ne devienne pas trop large.
- Réactivité et design flexible : max-width est très utile pour créer des mises en page réactives. Par exemple, en utilisant max-width avec des valeurs en
pourcentages ou en unités relatives comme em, on peut s'assurer que l'élément s'adapte à la taille de l'écran tout en respectant une largeur maximale. Cela évite que les éléments
soient trop grands sur des écrans larges ou trop petits sur des écrans plus petits.
- Effet sur les éléments positionnés : Pour les éléments positionnés avec position: absolute;, position: fixed;, ou position: relative;, la propriété
max-width agit normalement en limitant leur largeur maximale. Cependant, pour les éléments positionnés de manière absolue ou fixe, la largeur peut parfois être influencée
par d'autres propriétés de mise en page, telles que les dimensions du conteneur parent ou de la fenêtre.
- Limitations avec flexbox et grid : Lorsqu'un élément est placé dans un conteneur utilisant Flexbox ou Grid, max-width peut parfois interagir
de manière complexe avec d'autres propriétés de mise en page. Par exemple, dans Flexbox, un élément flex peut être contraint par max-width si l'espace restant
dans le conteneur est plus large que la valeur maximale spécifiée, mais il peut aussi se redimensionner pour remplir l'espace disponible tout en respectant cette limite.
- Comportement avec des éléments en bloc et en ligne : La propriété max-width s'applique de manière plus évidente aux éléments de type bloc (block), s'étendant
naturellement sur toute la largeur disponible. Toutefois, pour les éléments en ligne (inline ou inline-block), max-width peut ne pas avoir d'impact immédiat,
car ces éléments ne respectent pas une largeur maximale en dehors de leur contenu. Il est souvent nécessaire de convertir un élément en bloc (avec display: block;) pour
que max-width soit pleinement effectif.
Dernière mise à jour : Dimanche, le 20 décembre 2015