CSS max-width - Maximale Breite der HTML-Elemente festlegen

Man kann den HTML-Elementen über CSS auch eine maximale Breite zuweisen, die nicht überschritten wird, selbst wenn der Inhalt eigentlich größer ist. Das ist z.B. bei Bildern auf Websites mit responsive Design sinnvoll, um als maximale Breite den Anzeigebereich (100%) vorzugeben, damit die Bilder bei geringeren Breiten skaliert werden.

Wie sich eine Box mit der Eigenschaft max-width verhält, hängt davon ab, ob man das Element über float (rechts oder links) mit anderen Elementen umfließen lässt oder nicht. Hierbei verhält es sich wie folgt.

  • Falls einem Element die Eigenschaft max-width zugewiesen wurde, die Eigenschaft float jedoch nicht verwendet, dann nimmt das Element automatisch die Breite ein, die als Wert für max-width angegeben wurde.
  • Falls über max-width die maximale Breite angegeben wurde und man das Element über float mit anderen Elementen umfließen lässt, ist das Element initial bzw. ohne Inhalt 0px breit. Erst durch die Inhalte wird es breiter. In diesem Fall wird das Element jedoch nur bis zu dem Maximalwert verbreitert.
  • Sind im Element große Inhalte vorhanden, die breiter sind als die Maximalbreite, ragen diese aus der Box hinaus.

Das Verhalten ist nachfolgend schematisch abgebildet.

Verhalten der Elemente bei max-width

Neben Block-Elementen kann die Eigenschaft max-width Inline-Elementen zugewiesen werden, die replaced sind. Damit sind ersetzte Elemente gemeint, die außerhalb der Datei bereitliegen und eingebunden werden, z.B. Bilder. Anhand eines Beispiels ist nachfolgend die Syntax für max-width abgebildet.

CSS-Code mit max-width

Angabe des Werts für die maximale Breite

Für die Angabe des Werts bzw. der Einheit hat man bei max-width mehrere Optionen und man ist nicht nur auf numerische Werte und der Einheit px beschränkt. Nachfolgend sind einige Möglichkeiten aufgelistet, wobei die Unterstützung durch die Browser nicht immer gegeben ist. Die Platzhalter <Zahl> stehen für eine numerische Angabe. In Klammern am Ende jedes Eintrags ist die Erläuterung.

Numerische Werte mit Einheit

  • <Zahl>px (Pixel)
  • <Zahl>% (Prozentuale Angabe, bezieht sich auf das umgebende Block-Element)
  • <Zahl>em (relative Schriftgröße des Elternelements, beginnend vom Standard des Geräts)
  • <Zahl>rem (1rem entspricht der Größe, die für das Wurzelelement html gilt)
  • <Zahl>ex (1ex entspricht der Größe des Kleinbuchstabens x, falls es definiert wurde, ansonsten 0.5em)
  • <Zahl>ch (1ch entspricht der Breite der Ziffer 0, falls es definiert wurde, ansonsten Durchschnittsbreite aller Zeichen)
  • <Zahl>vw (1vw entspricht 1% der Anzeigebreite)
  • <Zahl>vh (1vh entspricht 1% der Anzeigehöhe)
  • <Zahl>vmin (der kleinere Wert von vw oder vh)
  • <Zahl>vmax (der größere Wert von vw oder vh)
  • <Zahl>pt (Punkt)
  • <Zahl>pc (Pica)
  • <Zahl>in (Inch)
  • <Zahl>mm (Millimeter)
  • <Zahl>cm (Zentimeter)

Keyword-Werte

  • auto (Standardwert, überlässt die Berechnung dem Browser)
  • inherit (Vererbt vom Elternelement)
  • initial (Setzt auf den Standardwert)

Sonstige Keyword-Werte (zum Teil experimentell)

  • min-content (Kleinste intrinsische Breite)
  • -webkit-min-content (Browser-Präfix für min-content in Chrome)
  • -moz-min-content (Browser-Präfix für min-content in Firefox)
  • max-content (Bevorzugte intrinsische Breite)
  • -webkit-max-content (Browser-Präfix für max-content in Chrome)
  • -moz-max-content (Browser-Präfix für max-content in Firefox)
  • intrinsic (früherer Vorschlag für max-content, z.T. von Browsern implementiert)
  • fit-content (Passend zum Inhalt)
  • -webkit-fit-content (Browser-Präfix für fit-content in Chrome)
  • -moz-fit-content (Browser-Präfix für fit-content in Firefox)
  • available (Verfügbare Breite)
  • fill-available (Keyword für available in Chrome)
  • -moz-available (Browser-Präfix für available in Firefox)
  • border-box (Zusatz, falls genutzt, gilt Wert/Einheit für border-box)
  • content-box (Zusatz, falls genutzt, gilt Wert/Einheit für content-box)
  • unset (Setzt auf den Wert, der über inherit vererbt worden ist und auf initial, falls nichts vererbt wurde)

Maximale Breite mit calc() berechnen

Beim Standard Box-Modell werden die Größenangaben wie max-width immer für den Inhaltsbereich angegeben. Etwaige Rahmen oder Abstände werden zur angegebenen Größe hinzu addiert. Dadurch vergrößert sich die Box. Das kann unter Umständen zu unerwünschten Ergebnissen führen, beispielsweise wenn man den Inhaltsbereich in Prozent angibt und den Rahmen in Pixel. Wenn man vom Standard Box-Modell abweichen möchte, kann man mit box-sizing das Box-Modell umstellen. Alternativ wäre auch möglich, als max-width eine Berechnung in der Form "<x>% - <x>px" anzugeben.

Hierbei verwendet man als Wert calc(). Innerhalb der runden Klammern wird die Formel für die Berechnung eingegeben. Nachfolgend ist die Syntax anhand eines Beispiels abgebildet.

max-width mit calc berechnen

Angabe von width, min-width und max-width

Es kann sein, dass man die Eigenschaft max-width zusammen mit width oder min-width angegeben hat. In solchen Fällen wird width von max-width überschrieben, max-width wird wiederum von min-width überschrieben.

Bei übergroßen Inhalten overflow einsetzen

Da mit der Eigenschaft max-width die Breite begrenzt wird, kann es vorkommen, dass ein Element übergroße Inhalte enthält, z.B. lange Wörter oder große Bilder. In solchen Fällen ragt der Inhalt über die Box hinaus.

Große Inhalt in Box mit max-width

Wenn übergroße Inhalte nicht hinausragen sollen, kann man die Eigenschaft overflow verwenden. Damit kann man z.B. den hinausragenden Teil nicht anzeigen lassen oder dafür sorgen, dass an der Box Scrollleisten eingeblendet werden.

overflow bei Elementen mit max-width

Eigenschaft max-width für Bilder in responsive Designs

Wenn man Websites mit responsive Design erstellt hat, benötigt man eine Lösung, mit der die Bilder bei geringeren Breiten automatisch skaliert werden. Hierfür wird häufig der folgende Code verwendet.

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

/* Für Firefox */
width: 100%;
}

Der CSS-Code sorgt dafür, dass das Bild maximal so breit ist wie der Anzeigebereich und die Höhe wird automatisch berechnet. Eigentlich müssten die ersten beiden Einträge ausreichen. Allerdings führte das in Firefox 38 nicht zum gewünschten Effekt. Hierfür benötigte man den dritten Eintrag, wodurch jedoch das weitere Problem entstand, dass kleine Bilder auf 100% vergrößert wurden. Ein float: left; schuf an dieser Stelle Abhilfe.