Propriété CSS max-width

La propriété max-width définit la largeur maximale de l'élément.

Cette propriété empêche la valeur de la propriété width de devenir supérieure à la valeur spécifiée pour max-width.

Pendant ce temps, la propriété max-width passe outre à la propriété width et la propriété CSS min-width passe outre à la propriété max-width.

Valeur initiale	none
Appliquée à	Tous les éléments sauf les éléments en ligne non remplacés, les colonnes de tableaux et les groupes de colonnes.
Héritée	Non.
Animable	Oui. La largeur est animable.
Version	CSS2
Syntaxe DOM	object.style.maxWidth = "500px";

Syntaxe

max-width: none | length | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div {
      max-width: 50%;
      background-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété max-width</h2>
    <div>La largeur maximale de ce texte est définie à 50%.</div>
  </body>
</html>

Essayez-vous-même!

Dans l'exemple suivant, le premier élément est spécifié par "px" et le deuxième par "em".

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div {
      max-width: 250px;
      background-color: #8ebf42;
      }
      p {
      max-width: 20em;
      background-color: #ccc;
      color: #fff;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété max-width</h2>
    <div>La largeur maximale de cet élément div est définie à 250px.</div>
    <p>La largeur maximale de ce paragraphe est définie à 20em.</p>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
auto	Définit la largeur maximale. C'est la valeur initiale de cette propriété.
length	Définit la largeur maximale en px, pt, cm, etc. Valeur initiale est 0.
%	Définit la largeur maximale en % de l'élément contenu.
initial	Fait utiliser la valeur initiale.
inherit	Hérite la propriété de son élément parent.