CSS-Eigenschaft max-width

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

chrome edge firefox safari opera
1.0+ 12.0+ 1.0+ 2.0+ 4.0+

Übe dein Wissen

Welche Aussage beschreibt korrekt die CSS-Eigenschaft 'max-width'?
Finden Sie das nützlich?