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
|
---
title: max-width
slug: Web/CSS/max-width
tags:
- CSS
- CSS Referenz
translation_of: Web/CSS/max-width
---
<p>{{ CSSRef() }}</p>
<h2 id="Übersicht">Übersicht</h2>
<p>Die <code>max-width</code> Eigenschaft wird verwendet, um die maximale Breite eines Elements festzulegen. Das verhindert, dass der benutzte Wert der <a href="/de/CSS/width" title="de/CSS/width"><code>width</code></a> Eigenschaft nicht größer wird als der festgelegte Wert von <code>max-width</code>.</p>
<p>Hinweis: <code>max-width</code> überschreibt <a href="/de/CSS/width" title="de/CSS/width"><code>width</code></a>, allerdings überschreibt <a href="/de/CSS/min-width" title="de/CSS/min-width"><code>min-width</code></a> auch <code>max-width</code>.</p>
<ul>
<li>Standardwert: <code>none</code></li>
<li>Anwendbar auf: Blockelemente und ersetzte Elemente, für <table> siehe <a href="/de/CSS/max-width#Browser_Kompatibilit.c3.a4t" title="de/CSS/max-width#Browser_Kompatibilit.c3.a4t">Browser Kompatibilität</a></li>
<li>Vererbbar: Nein</li>
<li>Prozentwerte: beziehen sich auf die Breite des umschließenden Blocks</li>
<li>Medium: visuell</li>
<li>berechneter Wert: die Prozentzahl wie festgelegt, die absolute Länge oder <code>none</code></li>
</ul>
<h2 id="Syntax">Syntax</h2>
<pre class="eval">max-width: <Längenangabe> | <Prozentzahl> | none | -moz-max-content | -moz-min-content | -moz-fit-content | -moz-available | inherit
</pre>
<h3 id="Werte">Werte</h3>
<dl>
<dt>
<Längenangabe></dt>
<dd>
Siehe <a href="/de/CSS/Einheiten#L.c3.a4ngen" title="MDC">Länge</a> für mögliche Einheiten.</dd>
<dt>
Prozentzahl</dt>
<dd>
Eine <a href="/de/CSS/Einheiten#Prozent" title="MDC">prozentuale</a> Angabe, die sich auf die Breite des umschließenden Blocks bezieht.</dd>
<dt>
none</dt>
<dd>
Das Element verfügt über keine maximale Breite.</dd>
<dt>
inherit</dt>
<dd>
Der Wert des Elternelements wird geerbt.</dd>
</dl>
<h4 id="Mozilla_Erweiterungen">Mozilla Erweiterungen</h4>
<dl>
<dt>
-moz-max-content</dt>
<dd>
{{ gecko_minversion_inline("1.9") }} Bevorzugte intrinsische Breite.</dd>
<dt>
-moz-min-content</dt>
<dd>
{{ gecko_minversion_inline("1.9") }} Minimale intrinsische Breite.</dd>
<dt>
-moz-available</dt>
<dd>
{{ gecko_minversion_inline("1.9") }} Die Breite des umschließenden Blocks minus horizontalen margin, padding und border Werten.</dd>
<dt>
-moz-fit-content</dt>
<dd>
{{ gecko_minversion_inline("1.9") }} Gleichbedeutend zu <code>-moz-max-content.</code></dd>
</dl>
<h2 id="Beispiele">Beispiele</h2>
<pre>body { max-width: 40em; }
table { max-width: 75%; }
form { max-width: none; }
</pre>
<p id="Beispiel_1_.7B.7B_gecko_minversion_inline(.221.9.22)_.7D.7D">Beispiel 1 {{ gecko_minversion_inline("1.9") }}</p>
<pre>p { background: gold }
</pre>
<p style="background: gold;">The Mozilla community produces a lot of great software.</p>
<p id="Beispiel_2_.7B.7B_gecko_minversion_inline(.221.9.22)_.7D.7D">Beispiel 2 {{ gecko_minversion_inline("1.9") }}</p>
<pre>p { background: lightgreen;
max-width: intrinsic; /* Safari/WebKit */
max-width: -moz-max-content; /* Firefox/Gecko */
}
</pre>
<p style="background: lightgreen; max-width: -moz-max-content;">The Mozilla community produces a lot of great software.</p>
<p id="Beispiel_3_.7B.7B_gecko_minversion_inline(.221.9.22)_.7D.7D">Beispiel 3 {{ gecko_minversion_inline("1.9") }}</p>
<pre>p { background: lightblue; max-width: -moz-min-content; }
</pre>
<p style="background: lightblue; max-width: -moz-min-content;">The Mozilla community produces a lot of great software.</p>
<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
<table class="standard-table">
<tbody>
<tr>
<th>Browser</th>
<th>ab Version</th>
<th>auf <code><table></code> anwendbar</th>
<th colspan="2">intrinsische Breite</th>
<th colspan="2">minimale intrinsische Breite</th>
</tr>
<tr>
<td>Internet Explorer</td>
<td><strong>7.0</strong></td>
<td>nein</td>
<td>---</td>
<td>---</td>
<td>---</td>
<td>---</td>
</tr>
<tr>
<td>Firefox (Gecko)</td>
<td><strong>1.0</strong> (1.0)</td>
<td>ja</td>
<td>3.0 (1.9)</td>
<td><code>-moz-max-content</code></td>
<td>3.0 (1.9)</td>
<td><code>-moz-min-content</code></td>
</tr>
<tr>
<td>Opera</td>
<td><strong>4.0</strong></td>
<td>ja</td>
<td>---</td>
<td>---</td>
<td>---</td>
<td>---</td>
</tr>
<tr>
<td>Safari (WebKit)</td>
<td><strong>2.0.2</strong> (416), vorher fehlerhaft</td>
<td>nein</td>
<td>2.0 (412) ?</td>
<td><code>intrinsic</code></td>
<td>---</td>
<td>---</td>
</tr>
</tbody>
</table>
<h2 id="Spezifikation">Spezifikation</h2>
<ul>
<li><a class="external" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths" lang="en">CSS 2.1 Visual formatting #max-width</a></li>
</ul>
<h2 id="Siehe_auch">Siehe auch</h2>
<ul>
<li><a href="/de/CSS/width" title="de/CSS/width"><code>width</code></a>, <a href="/de/CSS/min-width" title="de/CSS/min-width"><code>min-width</code></a></li>
<li><a href="/de/CSS/height" title="de/CSS/height"><code>height</code></a>, <a href="/de/CSS/min-height" title="de/CSS/min-height"><code>min-height</code></a>, <a href="/de/CSS/max-height" title="de/CSS/max-height"><code>max-height</code></a></li>
</ul>
<p>{{ languages( { "en": "en/CSS/max-width", "es": "es/CSS/max-width", "fr": "fr/CSS/max-width" } ) }}</p>
|
