CSS/Eigenschaften/Größenangaben/max-width

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Die Eigenschaft max-width legt die Maximalbreite eines CSS-Elements fest. Hierbei wird die Breite des Elements an den Inhalt angepasst, falls die Breite kleiner als die Maximalbreite ist.

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • CSS 2.0
Beispiel ansehen …
div > div {
  display: inline-block;
  vertical-align: top;
  height: 10em;
  width: auto;
  background-color: khaki;
  margin: 1em .5em;
}
p:first-child {
  text-align: center;
}
code {
  display: block;
}
.max_20 {
  max-width: 20em;
}
.max_40 {
  max-width: 40em;
}
width_10 {
  width: 10em;
}
.width_20 {
  width: 20em;
}
.width_60 {
  width: 60em;
}
.width_50p {
  width: 50%;
}
<h1>Beispiele zur Verwendung von width und max-width</h1>
<div>
  <div class="width_20">
    <p><code>width: 20em;</code><code>max-width: none;</code></p>
    <p>Diese beiden Elemente </p>
  </div>
  <div class="width_20">
    <p><code>width: 20em;</code><code>max-width: none;</code></p>
    <p>haben eine festgelegte Breite von 20em.
      Die Box passt sich nicht einem schmaleren Inhalt an.
    </p>
  </div>
</div>
<!-- … -->
Beachten Sie: In diesem Beispiel sind die Klassenbezeichner nach der gegenwärtig gewünschten Darstellung gewählt. In einem konkreten Projekt sollten Sie Klassen entsprechend der Inhalte bezeichnen.

Erlaubt sind folgende Werte:

  • eine nicht-negative Längenangabe
  • eine Prozentangabe, diese bezieht sich auf die Breite des umschließenden Blocks
  • none, keine Beschränkung in der Breite, Ausgangswert
  • inherit, es gilt die maximale Breite des Elternelements

Das Verhalten von Inhalten, die breiter als die maximale Breite sind, lässt sich über die Eigenschaft overflow steuern.

Beispiel: Gegenüberstellung von min-width und max-width ansehen …
div {
  height: 10em;
  width: 50%;
  background-color: khaki;
  margin: 1em auto;
}
p:first-child {
  text-align: center;
}
code {
  display: block;
}
.min_40 {
  min-width: 40em;
}
.max_40 {
  max-width: 40em;
}
#vergleich {
  width: 40em;
  height: 2em;
  line-height: 2em;
}
<h1>min-width und max-width im Vergleich</h1>
<div class="min_40">
  <p><code>min-width: 40em;</code><code>width: 50%;</code></p>
  <p>Dieser Absatz soll halb so breit wie sein Elternelement sein, jedoch nicht schmaler als 40em werden.
      Probieren Sie es aus, indem Sie die Breite des Browserfensters verändern.</p>
</div>
<div id="vergleich">
  <p>Zum Vergleich: Diese Box ist 40em breit.</p>
</div>
<div class="max_40">
  <p><code>width: 50%;</code><code>max-width: 40em;</code></p>
  <p>Dieser Absatz soll halb so breit wie sein Elternelement sein, jedoch nicht
    breiter als 40em werden. Probieren Sie es aus, indem Sie die Breite des
    Browserfensters verändern.
  </p>
</div>

siehe auch[Bearbeiten]