Die Eigenschaft max-width stellt die maximale Breite eines Elements ein.
Diese Eigenschaft verhindert, dass der Wert der Eigenschaft width größer wird als der für max-width angegebene Wert.
In der Zwischenzeit überschreibt die Eigenschaft max-width die Eigenschaft width und CSS-Eigenschaft min-width die Eigenschaft max-width.
| Anfangswert | none |
| Gilt für | Alle Elemente, aber nicht ersetzte Inline-Elemente, Tabellenzeilen und Zeilengruppen. |
| Geerbt | Nein |
| Animierbar | Ja, die Breite ist animierbar. |
| Version | CSS2 |
| DOM Syntax | object.style.maxWidth = "500px"; |
Syntax
max-width: none | length | initial | inherit;Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel desDokuments</title>
<style>
div {
max-width: 50%;
background-color: #1c87c9;
}
</style>
</head>
<body>
<h2>beispiel für die Eigenschaft max-width</h2>
<div>Max-width dieses Textes ist auf 50% eingestellt.</div>
</body>
</html>In diesem Beispiel ist das erste Element mit "px" und das Zweite mit "em" angegeben.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
div {
max-width: 250px;
background-color: #8ebf42;
}
p {
max-width: 20em;
background-color: #ccc;
color: #fff;
}
</style>
</head>
<body>
<h2>Beispiel für die Eigenschaft max-width</h2>
<div>Max-width dieses div-Elements ist auf 250px eingestellt.</div>
<p>Max-width dieses Absatzes ist auf 20em eingestellt.</p>
</body>
</html>Werte
| Wert | Beschreibung |
|---|---|
| auto | Definiert die maximale Breite. Es ist der Standardwert dieser Eigenschaft. |
| length | Definiert die maximale Breite in px, pt, cm usw. Der Standardwert ist 0. |
| % | Stellt die maximale Breite in % des enthaltenden Elements ein. |
| initial | Der Wert stellt die Eigenschaft auf seinen Standardwert ein. |
| inherit | Der Wert erbt die Eigenschaft von seinem übergeordneten Element. |
Browser-Support
|
|
|
|
|
|---|---|---|---|---|
| 1.0+ | 12.0+ | 1.0+ | 2.0+ | 4.0+ |
Übe dein Wissen
Welche Aussage beschreibt korrekt die CSS-Eigenschaft 'max-width'?
Richtig!
Falsch!