Propriété CSS max-width

La propriété CSS max-width définit la largeur maximale qu'un élément peut atteindre. L'élément peut être plus étroit que cette valeur, mais il ne dépassera jamais cette largeur, quelle que soit la quantité de contenu qu'il contient ou la taille de son conteneur.

Cela fait de max-width la pierre angulaire des mises en page responsives : au lieu de fixer un élément à une largeur unique, vous le laissez se rétrécir librement sur les petits écrans tout en le limitant sur les grands.

Interaction entre max-width et width

Il est utile de concevoir trois propriétés fonctionnant ensemble :

max-width empêche la valeur calculée de width de devenir plus grande que la valeur spécifiée. Si width est supérieur à max-width, l'élément est ramené à max-width.
min-width empêche l'élément de devenir plus petit que sa valeur, et elle prend le dessus en cas de conflit — min-width remplace max-width. Ainsi, si min-width est supérieur à max-width, l'élément utilise min-width.

En résumé, l'ordre de résolution est : min-width l'emporte sur max-width, et max-width l'emporte sur width.

Un cas d'usage courant est une "colonne de contenu centrée" qui occupe toute la largeur des petits viewport mais cesse de s'élargir une fois qu'elle atteint une largeur confortable à lire :

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

Sur un téléphone, le conteneur occupe toute la largeur ; au-delà de 1200px, il reste à 1200px et les marges automatiques le maintiennent centré.

Valeur initiale	none
S'applique à	Tous les éléments, sauf les éléments en ligne non remplacés, les lignes de tableau et les groupes de lignes.
Héritage	Non.
Animable	Oui. La largeur est animable.
Version	CSS2
Syntaxe DOM	object.style.maxWidth = "500px";

Syntaxe

Syntaxe de la propriété CSS max-width

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

Un percentage est résolu par rapport à la largeur du bloc conteneur de l'élément. Une length (comme px, em, rem, ch) est une limite fixe absolue ou relative. La valeur par défaut, none, signifie "aucun maximum".

Exemple de la propriété max-width :

Exemple de la propriété CSS max-width avec une valeur en %

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        max-width: 50%;
        background-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Max-width property example</h2>
    <div>The max-width of this text is defined as 50%.</div>
  </body>
</html>

Essayez vous-même »

Résultat

Exemple de la propriété max-width définie en "px" et "em" :

Exemple de la propriété CSS max-width avec des valeurs px et em

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        max-width: 250px;
        background-color: #8ebf42;
      }
      p {
        max-width: 20em;
        background-color: #ccc;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <h2>Max-width property example</h2>
    <div>The max-width of this div element is defined as 250px.</div>
    <p>The max-width of this paragraph is defined as 20em.</p>
  </body>
</html>

Essayez vous-même »

Images responsives avec max-width

Un usage classique de max-width consiste à faire réduire les images sur les petits écrans sans jamais dépasser leur taille naturelle :

img {
  max-width: 100%;
  height: auto;
}

max-width: 100% permet à l'image de se réduire pour s'adapter à un conteneur étroit, tandis que height: auto préserve son ratio d'aspect. Comme il n'y a pas de width fixe, l'image ne s'agrandit jamais au-delà de sa résolution intrinsèque.

max-width et box-sizing

Par défaut (box-sizing: content-box), max-width ne limite que la zone de contenu — le rembourrage et la bordure s'ajoutent en plus, de sorte que la boîte visible peut être plus large que max-width. Si vous souhaitez que max-width inclue le rembourrage et la bordure, utilisez box-sizing: border-box :

.card {
  max-width: 400px;
  padding: 20px;
  box-sizing: border-box; /* total rendered width never exceeds 400px */
}

Valeurs

Valeur	Description
`none`	Aucune largeur maximale. C'est la valeur par défaut.
`length`	Une largeur maximale fixe en `px`, `em`, `rem`, `ch`, etc. Les valeurs négatives sont invalides.
`%`	Une largeur maximale en pourcentage de la largeur du bloc conteneur.
`initial`	Définit la propriété à sa valeur par défaut (`none`).
`inherit`	Hérite de la valeur de l'élément parent.

Propriétés associées

min-width — définit la limite inférieure ; remplace max-width.
width — la largeur préférée, limitée par max-width.
max-height / min-height — les équivalents verticaux.

Pratique

Que fait la propriété CSS max-width ?

Elle empêche la valeur calculée de la propriété width de devenir plus grande que la valeur spécifiée par max-width.Elle augmente la largeur d'un élément à la valeur maximaleElle définit une largeur minimale pour un élémentElle limite la largeur maximale des éléments enfants à l'intérieur d'un conteneur parent.Elle augmente le rembourrage à l'intérieur d'un élément.