CSS, HTML und Javascript mit {stil}

CSS min-width / max-width

CSS min-width und max-width

CSS min-width und max-width legen die minimale bzw. maximale Breite von HTML-Blöcken fest. min-width / max-width enthält kein padding, border oder margin.

Eine Box wird niemals schmaler als in min-width angegeben, darf aber breiter werden, wenn der Inhalt min-width überschreitet. Eine Box mit max-width wird nicht breiter, selbst wenn CSS width einen größeren Wert enthält.

min-width und max-width regeln z.B. die Laufweite von Texten innerhalb von flexiblen Blöcken oder die Breite des body-Elements in flexiblen Layouts auf eine minimale bzw. maximale Breite.

Cookie cookie toffee pie tiramisu. Biscuit cookie muffin cupcake. Sweet roll croissant muffin candy canes chupa chups. Icing bonbon macaroon sesame snaps croissant.

Cookie cookie toffee pie tiramisu. Biscuit cookie muffin cupcake. Sweet roll croissant muffin candy canes chupa chups. Icing bonbon macaroon sesame snaps croissant.

.block { 
    display: flex; justify-content: center 
}
.q1 { 
    width: 50%; min-width: 200px; background: ivory
}
.q2 { 
    width: 50%; max-width: 100px; background: lightblue
}
@media (min-width:680px) {
    .q1 { min-width: 400px }
    .q2 { max-width: 240px }
}

min-width

Eine Box mit min-width kann durch ein übergroßes Element – z.B. durch ein Bild – verbreitert werden.

Cookie cookie toffee pie tiramisu. Biscuit cookie muffin cupcake. Sweet roll croissant muffin candy canes chupa chups. Icing bonbon macaroon sesame snaps croissant.

Thumbnail klicken, um das Bild in voller Breite zu zeigen

Tumbnail klicken

Größeres Bild mit CSS animieren

Ein Element mit min-width kann über die Grenze seines umfassenden Blocks hinaus wachsen, aber die maximale Breite des umfassenden Blocks wird durch das übergroße Element nicht gedehnt.

width mit max-width animieren

CSS transition nutzt min-width / max-width, wenn die Breite eines animierten Elements nicht bekannt ist.

<input type="checkbox" id="grow">
<label for="grow" class="grow">
    <img src="flowers.jpg" width="980" height="371" alt="…">
</label>
CSS für die Animation von width mit max-width
<style>
input#grow { display: none; }

label.grow { 
   margin: 2em auto; 
   max-width: 200px; 
   transition: 1s; 
   display: block; cursor: pointer;
}

input#grow:checked + label.grow { max-width: 70%; }
</style>

Früher hätten wir einfach auf .grow:hover gesetzt, aber das würde heute auf den Touchscreens Probleme machen. Anstelle dessen wirkt hier das CSS-Event :checked

input#grow bleibt verborgen, denn das dazugehörige label-Element wirkt genauso wie das input-Element selbst und fängt den Klick ab.

Die letzte Zeile weist label.grow die maximale Größe zu. So braucht der Overlay keine Breakpoints für unterschiedliche Monitorgrößen: Das Element passt sich immer an den verfügbaren Platz an.

CSS min-width

Erblich: Nein

min-width
gibt die minimale Breite eines Elements an. max-height gehört zu einer Gruppe von Eigenschaften, mit denen Höhe, Breite, maximale Höhe, maximale Breite, minimale Höhe und minimale Breite bestimmt werden.
Werte
<length> | <percentage> | inherit

min-width überschreibt sowohl width als auch max-width. Wenn max-width kleiner als ein zuvor definierter Wert für min-width ist, wird max-width auf den Wert von min-width gesetzt. Wenn der Wert für min-width größer als der aktuelle Wert für width ist, wird width auf den Wert von min-width gesetzt.

<length>
kann in einer der folgenden Maßeinheiten angegeben werden: cm (Zentimeter), em (ems), ex (x-Höhe), in (Inch), mm (Millimeter), pc (Pica), pt (Punkt), px (Pixel).
<percentage (Prozentsatz)
gibt die Elementhöhe als Prozentsatz der Höhe des umfassenden Blocks an, in dem das Element liegt, und ist eine positive ganze Zahl. Das Prozentzeichen ist zwingend erforderlich.

CSS max-width

Erblich: Nein

max-width
gibt die maximale Breite eines Elements an. max-width gehört zu einer Gruppe von Eigenschaften, mit denen Höhe, Breite, maximale Höhe, maximale Breite, minimale Höhe und minimale Breite bestimmt werden.
Werte
<length> | <percentage> | none | inherit
none
gibt an, dass keine Einschränkungen bezüglich der Höhe des Elements gelten.
<length>
kann in einer der folgenden Maßeinheiten angegeben werden: cm (Zentimeter), em (ems), ex (x-Höhe), in (Inch), mm (Millimeter), pc (Pica), pt (Punkt), px (Pixel).
<percentage> (Prozentsatz)
gibt die Elementhöhe als Prozentsatz der Höhe des umfassenden Blocks an, in dem das Element liegt, und ist eine positive ganze Zahl. Das Prozentzeichen ist zwingend erforderlich.

Die Voreinstellung ist 0.