max-width

Avatar of Sara Cope
Sara Cope am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Die Eigenschaft max-width in CSS wird verwendet, um die maximale Breite eines bestimmten Elements festzulegen. Die Eigenschaft max-width überschreibt die Eigenschaft width, aber min-width überschreibt immer max-width, unabhängig davon, ob sie vor oder nach width in Ihrer Deklaration steht. Autoren können beliebige Längenwerte verwenden, solange sie positiv sind.

.wrapper {
  width: 100%;
  max-width: 20em; /* Will be AT MOST 20em wide */
}

.wrapper {
  min-width: 50em; /* Overrides max-width */
  width: 100%;
  max-width: 20em; /* Will be AT MOST 20em wide */
}
Check out this Pen!

Seien Sie vorsichtig, wenn Sie davon ausgehen, dass max-width vererbt wird, da diese Eigenschaft nicht von übergeordneten Elementen geerbt wird. Wenn eine width von 300px mit einer max-width von 600px definiert wurde, überschreibt der anfängliche width-Wert immer den max-width-Wert von 600px.

Browser-Unterstützung

IEEdgeFirefoxChromeSafariOpera
7+AlleAlleAlleAlleAlle
Android ChromeAndroid FirefoxAndroid BrowseriOS SafariOpera Mobile
AlleAlleAlleAlleAlle
Quelle: caniuse