La propriété max-width est utilisée pour définir la largeur maximale d'un élément donné. Elle empêche la valeur de la propriété width de devenir supérieure à la valeur spécifiée par max-width (autrement dit, max-width est une borne supérieur pour width).
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
La valeur de max-width surcharge la valeur de width mais elle est surchargée par min-width.
Syntaxe
/* Valeur de longueur */ /* Type <length> */ max-width: 3.5em; /* Valeurs relatives */ /* Type <percentage> */ max-width: 10%; /* Valeurs avec un mot-clé */ max-width: none; max-width: max-content; max-width: min-content; max-width: fit-content; max-width: fill-available; /* Valeurs globales */ max-width: inherit; max-width: initial; max-width: unset;
Valeurs
<length>- La largeur minimale fixée. Voir
<length>pour les unités qu'on peut utiliser. Une largeur négative rendra la déclaration invalide. <percentage>- La largeur minimale fixée, exprimée comme un fraction de la largeur du bloc englobant. Voir la page
<percentage>sur les valeurs possibles avec ce type. Les valeurs négatives rendront la déclaration invalide. fill-available- La largeur du bloc englobant moins la marge horizontale, la bordure et le remplissage (padding). Certains navigateurs implémentent cette valeur avec un ancien nom :
available. fit-content- Un synonyme pour
max-content. max-content- La largeur intrinsèque préférée.
min-content- La largeur intrinsèque minimale.
none- Il n'y a pas de maximum pour la largeur. C'est la valeur par défaut.
Syntaxe formelle
<length> | <percentage> | none | max-content | min-content | fit-content | fill-available
Exemples
Exemple simple avec un tableau
HTML
<div> Lorem ipsum tralala sit amet, consectetur adipisicing
<p>
Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
CSS
div {
width: 250px;
border: solid 1px red;
}
p {
max-width: 60%;
border: solid 1px blue;
}
Résultat
Accessibilité
Veiller à s'assurer que les éléments ciblés avec une règle utilisant max-width ne sont pas tronqués ou ne masquent pas d'autre contenu sur la page lorsqu'on zoome pour augmenter la taille du texte.
- Comprendre les règles WCAG 1.4
- Understanding Success Criterion 1.4.4, W3C Understanding WCAG 2.0 (en anglais)
Spécifications
| Spécification | État | Commentaires |
|---|---|---|
| CSS Intrinsic & Extrinsic Sizing Module Level 3 La définition de 'max-width' dans cette spécification. |
Version de travail | Ajout des mots-clés max-content, min-content, fit-content et fill-available. Les deux brouillons de spécifications CSS3 Box et CSS3 Writing Modes définissaient ces mots-clés mais ont été remplacées par cette spécification. |
| CSS Transitions La définition de 'max-width' dans cette spécification. |
Version de travail | max-width peut désormais être animée. |
| CSS Level 2 (Revision 1) La définition de 'max-width' dans cette spécification. |
Recommendation | Définition initiale. |
| Valeur initiale | none |
|---|---|
| Applicabilité | tous les éléments sauf les éléments en ligne non remplacés, les lignes de tableaux et les groupes de lignes |
| Héritée | non |
| Pourcentages | se rapporte à la largeur du bloc contenant |
| Média | visuel |
| Valeur calculée | le pourcentage comme spécifié ou la longueur absolue ou le mot-clé none |
| Type d'animation | une longueur, pourcentage ou calc() ; |
| Ordre canonique | l'ordre unique et non-ambigu défini par la grammaire formelle |
Compatibilité des navigateurs
Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une pull request sur https://github.com/mdn/browser-compat-data.
Update compatibility data on GitHub
| Ordinateur | Mobile | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Support simple | Chrome Support complet 1 | Edge Support complet 12 | Firefox
Support complet
1
| IE Support complet 7 | Opera
Support complet
4
| Safari Support complet 2 | WebView Android ? | Chrome Android ? | Edge Mobile Support complet Oui | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
fit-content, max-content, and min-content | Chrome
Aucun support
Non
| Edge Aucun support Non | Firefox
Support complet
3
| IE Aucun support Non | Opera Aucun support Non | Safari
Aucun support
Non
| WebView Android ? | Chrome Android ? | Edge Mobile ? | Firefox Android Aucun support Non | Opera Android ? | Safari iOS ? | Samsung Internet Android Aucun support Non |
stretch | Chrome
Support complet
22
| Edge Aucun support Non | Firefox Aucun support Non | IE Aucun support Non | Opera Aucun support Non | Safari Aucun support Non | WebView Android
Support complet
37
| Chrome Android
Support complet
25
| Edge Mobile ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android Aucun support Non |
Légende
- Support complet
- Support complet
- Aucun support
- Aucun support
- Compatibilité inconnue
- Compatibilité inconnue
- Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
- Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
- Voir les notes d'implémentation.
- Voir les notes d'implémentation.
- Cette fonctionnalité utilise un nom non-standard.
- Cette fonctionnalité utilise un nom non-standard.
- Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
- Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.