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>

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>

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.

Support de Navigateurs

1.0+ 12.0+ 1.0+ 2.0+ 4.0+


Trouvez-vous cela utile?

Articles Associées