Rôle

L’attribut max-width permet de spécifier la largeur maximum d’une boite

Version : CSS2

Héritage (inherit) : non

Propriété Javascript : element.style.maxWidth

Testez vous-même cet attribut

Utilisez Codepen.

– Le code CSS

section{
  height: 55px;
  background-color: rgb(220,220,220);
}
div{
  width: 50%;
  height: 50%;
  background-color: pink;
}
div.maxWidth{
  max-width: 150px;
  height: 50%;
  background-color: pink;
}

– Le code HTML

<section>
  <div>Texte</div>
  <div class="maxWidth">max-width:100px </div>
</section>

Résultat

Les boites orange et rose ont une largeur fixée à 50% pourcentage de la largeur du conteneur gris. Mais la boite orange à une largeur maximum de 100px

Compatibilité

L’attribut max-width est pris en charge par tous les principaux navigateurs
A partir d’ Internet Explorer 7

Valeurs

Les différentes valeurs de l’attribut max-width sont:

none

Valeur par défaut : pas de maximum .
Syntaxe :
max-width : none

length

Définit une valeur en px, pt, cm, em.
Syntaxe :
max-width : 20px

pourcentage

Définit une valeur en pourcentage par rapport à l’élément parent.
Syntaxe :
max-width : 30%

initial

Défini à sa valeur initiale (attention pas pris en charge par Internet Explorer et Opéra en dessous de la version 15). Peut être utilisé pour « neutraliser » une spécificité.
Syntaxe :
max-width : initial

inherit

Hérite de la même propriété que l’élément parent.
Syntaxe :
max-width : inherit

A voir aussi

border box-sizing clip height width margin padding overflow max-width min-width outline resize