W3docs
de
Anmelden

CSS max-width Eigenschaft

Mit der CSS-Eigenschaft max-width legen Sie die maximale Breite des Inhaltsbereichs eines Elements fest. Werte und Beispiele.

Die CSS-Eigenschaft max-width legt die maximale Breite fest, die ein Element erreichen darf. Das Element kann schmaler als dieser Wert sein, wird jedoch niemals breiter werden – unabhängig davon, wie viel Inhalt es enthält oder wie groß sein Container wird.

Damit ist max-width der Grundpfeiler responsiver Layouts: Anstatt ein Element auf eine feste Breite zu setzen, lässt man es auf kleinen Bildschirmen frei schrumpfen und begrenzt es auf großen Bildschirmen.

Wie max-width mit width zusammenwirkt

Es hilft, sich drei Eigenschaften vorzustellen, die gemeinsam wirken:

  • max-width verhindert, dass der verwendete Wert von width größer als der angegebene Wert wird. Wenn width größer als max-width aufgelöst wird, wird das Element auf max-width begrenzt.
  • min-width verhindert, dass das Element kleiner als sein Wert wird, und gewinnt bei Konflikten – min-width überschreibt max-width. Wenn also min-width größer als max-width ist, verwendet das Element min-width.

Kurz gesagt gilt die Auflösungsreihenfolge: min-width schlägt max-width, und max-width schlägt width.

Ein häufiges Muster in der Praxis ist eine „zentrierte Inhaltsspalte", die schmale viewport ausfüllt, sich aber nicht mehr verbreitert, sobald sie angenehm lesbar ist:

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

Auf einem Smartphone ist der Container volle Breite; ab 1200px bleibt er bei 1200px und die automatischen Abstände halten ihn zentriert.

Anfangswertnone
Gilt fürAlle Elemente, außer nicht-ersetzte Inline-Elemente, Tabellenzeilen und Zeilengruppen.
VererbtNein.
AnimierbarJa. Die Breite ist animierbar.
VersionCSS2
DOM-Syntaxobject.style.maxWidth = "500px";

Syntax

Syntax der CSS max-width Eigenschaft

max-width: none | length | percentage | initial | inherit;

Ein percentage-Wert wird relativ zur Breite des umgebenden Blocks des Elements aufgelöst. Ein length-Wert (wie px, em, rem, ch) ist eine absolute oder relative feste Obergrenze. Der Standard none bedeutet „kein Maximum".

Beispiel der max-width Eigenschaft:

Beispiel der CSS max-width Eigenschaft mit %-Wert

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        max-width: 50%;
        background-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Max-width property example</h2>
    <div>The max-width of this text is defined as 50%.</div>
  </body>
</html>
Probier es selbst »

Ergebnis

CSS max-width Eigenschaft

Beispiel der max-width Eigenschaft mit „px" und „em":

Beispiel der CSS max-width Eigenschaft mit px- und em-Werten

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        max-width: 250px;
        background-color: #8ebf42;
      }
      p {
        max-width: 20em;
        background-color: #ccc;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <h2>Max-width property example</h2>
    <div>The max-width of this div element is defined as 250px.</div>
    <p>The max-width of this paragraph is defined as 20em.</p>
  </body>
</html>
Probier es selbst »

Responsive Bilder mit max-width

Eine klassische Verwendung von max-width ist, Bilder auf kleinen Bildschirmen skalieren zu lassen, ohne dabei ihre natürliche Größe zu überschreiten:

img {
  max-width: 100%;
  height: auto;
}

max-width: 100% lässt das Bild auf einen schmalen Container schrumpfen, während height: auto das Seitenverhältnis beibehält. Da keine feste width gesetzt ist, wird das Bild nie über seine native Auflösung hinaus hochskaliert.

max-width vs. box-sizing

Standardmäßig (box-sizing: content-box) begrenzt max-width nur den Inhalts-Bereich – Innenabstand und Rahmen werden oben drauf addiert, sodass der sichtbare Kasten breiter als max-width werden kann. Wenn max-width Innenabstand und Rahmen einschließen soll, setzen Sie box-sizing: border-box:

.card {
  max-width: 400px;
  padding: 20px;
  box-sizing: border-box; /* total rendered width never exceeds 400px */
}

Werte

WertBeschreibung
noneKeine maximale Breite. Dies ist der Standardwert.
lengthEine feste maximale Breite in px, em, rem, ch usw. Negative Werte sind ungültig.
%Eine maximale Breite als Prozentsatz der Breite des umgebenden Blocks.
initialSetzt die Eigenschaft auf ihren Standardwert (none).
inheritErbt den Wert vom übergeordneten Element.

Verwandte Eigenschaften

  • min-width — legt die untere Grenze fest; überschreibt max-width.
  • width — die bevorzugte Breite, begrenzt durch max-width.
  • max-height / min-height — die vertikalen Entsprechungen.

Übung

Übung
Was bewirkt die CSS-Eigenschaft max-width?
Was bewirkt die CSS-Eigenschaft max-width?
Was this page helpful?