1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
|
---
title: max-width
slug: Web/CSS/max-width
tags:
- CSS
- Propriété
- Reference
translation_of: Web/CSS/max-width
---
<div>{{CSSRef}}</div>
<p>La propriété <strong><code>max-width</code></strong> est utilisée pour définir la largeur maximale d'un élément donné. Elle empêche la valeur de la propriété {{cssxref("width")}} de devenir supérieure à la valeur spécifiée par <code>max-width</code> (autrement dit, <code>max-width</code> est une borne supérieur pour <code>width</code>).</p>
<div>{{EmbedInteractiveExample("pages/css/max-width.html")}}</div
<p>La valeur de <code>max-width</code> surcharge la valeur de {{cssxref("width")}} mais elle est surchargée par {{cssxref("min-width")}}.</p>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="brush:css no-line-numbers">/* 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;
</pre>
<h3 id="Valeurs">Valeurs</h3>
<dl>
<dt><code><length></code></dt>
<dd>La largeur minimale fixée. Voir {{cssxref("<length>")}} pour les unités qu'on peut utiliser. Une largeur négative rendra la déclaration invalide.</dd>
<dt><code><percentage></code></dt>
<dd>La largeur minimale fixée, exprimée comme un fraction de la largeur du bloc englobant. Voir la page {{cssxref("<percentage>")}} sur les valeurs possibles avec ce type. Les valeurs négatives rendront la déclaration invalide.</dd>
<dt><code>fill-available</code>{{experimental_inline}}</dt>
<dd>La largeur du bloc englobant moins la marge horizontale, la bordure et le remplissage (<em>padding</em>). Certains navigateurs implémentent cette valeur avec un ancien nom : <code>available</code>.</dd>
<dt><code>fit-content</code> {{experimental_inline}}</dt>
<dd>Un synonyme pour <code>max-content</code>.</dd>
<dt><code>max-content</code> {{experimental_inline}}</dt>
<dd>La largeur intrinsèque préférée.</dd>
<dt><code>min-content</code> {{experimental_inline}}</dt>
<dd>La largeur intrinsèque minimale.</dd>
<dt><code>none</code></dt>
<dd>Il n'y a pas de maximum pour la largeur. C'est la valeur par défaut.</dd>
</dl>
<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
{{csssyntax}}
<h2 id="Exemples">Exemples</h2>
<h3 id="Exemple_simple_avec_un_tableau">Exemple simple avec un tableau</h3>
<h4 id="HTML">HTML</h4>
<pre class="brush: 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></pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css">div {
width: 250px;
border: solid 1px red;
}
p {
max-width: 60%;
border: solid 1px blue;
}</pre>
<h4 id="Résultat">Résultat</h4>
<p>{{EmbedLiveSample("Exemple_simple_avec_un_tableau","100%","100%")}}</p>
<h2 id="Accessibilité">Accessibilité</h2>
<p>Veiller à s'assurer que les éléments ciblés avec une règle utilisant <code>max-width</code> ne sont pas tronqués ou ne masquent pas d'autre contenu sur la page lorsqu'on zoome pour augmenter la taille du texte.</p>
<ul>
<li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li>
<li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html" rel="noopener"><em>Understanding Success Criterion 1.4.4, W3C Understanding WCAG 2.0</em> (en anglais)</a></li>
</ul>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécification</th>
<th scope="col">État</th>
<th scope="col">Commentaires</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Sizing', '#width-height-keywords', 'max-width')}}</td>
<td>{{Spec2('CSS3 Sizing')}}</td>
<td>Ajout des mots-clés <code>max-content</code>, <code>min-content</code>, <code>fit-content</code> et <code>fill-available</code>. 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.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Transitions', '#animatable-css', 'max-width')}}</td>
<td>{{Spec2('CSS3 Transitions')}}</td>
<td><code>max-width</code> peut désormais être animée.</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'visudet.html#min-max-widths', 'max-width')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>Définition initiale.</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<p>{{Compat("css.properties.max-width")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li>{{cssxref("width")}}</li>
<li>{{cssxref("min-width")}}</li>
<li>{{cssxref("min-height")}}</li>
<li>{{cssxref("max-height")}}</li>
<li>{{cssxref("box-sizing")}}</li>
<li><a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte" title="en/CSS/box_model">Le modèle de boîtes</a></li>
</ul>
|
