CSS width / height • Breite und Höhe

CSS width CSS height

HTML sieht alle Inhalte innerhalb des body-Tags als rechteckige Blöcke, die den Raum für ihre vollständige Darstellung einnehmen wollen

CSS width oder height begrenzen zwar den Raum, aber übergroße Inhalte fließen dabei über und drängen alles Folgende sozusagen runter.

Die CSS-Eigenschaften width und height setzen die Breite und Höhe eines HTML-Elements fest, sind aber mit Vorsicht anzuwenden:

Bild ist breiter als der Container

Die Hintergrundfarbe zeigt, dass die Box Breite und Höhe einhält. Aber übergroße Inhalte ohne weitere Formatierung fließen über – und zwar sowohl nach rechts als auch nach unten.

Inhalt fließt über

Übergroßer Inhalt überlagert die auf die Box folgenden Inhalte oder drängt die folgenden Inhalte weiter nach unten im Dokument.

<div style="width: 350px; height: 260px; background: lavender;">
   <img src="…" width="400" height="175" alt="0001280.gif" />
   <p> …  </p>
</div>

img width und height anpassen

CSS hält sich nur dann an width und height, wenn die Inhalte vollständig in das Element passen oder kleiner als der vorgesehene Raum sind.

Für das responsive Webdesign passt CSS heute die Größe von Bildern an den umfassenden Block an:

img { width: 100%; height: auto }

CSS width / CSS height

Erblich: nein

width, height
Breite / Höhe eines Elements. Wenn die Höhe eines Bildes auf einen Wert gesetzt ist und die Breite als auto angegeben wird, wird das Bild proportional skaliert (das Seitenverhältnis bleibt erhalten).
Werte
<length> | <%> | auto | inherit
<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)
basiert auf der Höhe des umfassenden Blocks, die als 100% definiert ist. Wenn die Höhe des umfassenden Blocks nicht expliziet notiert ist und der umfassende Block nicht absolut positioniert ist, wird der Wert wie "auto" interpretiert. Eine Prozentangabe für das Wurzelelement wird relativ zum Viewport interpretiert.
auto
ist die Voreinstellung und weist den Browser an, die Höhe automatisch zu berechnen. Wenn sowohl Höhe als auch Breite auf auto gesetzt werden, bleiben die Dimensionen des Text- oder Bildelements unverändert. Durch die Angabe von auto wird auch sichergestellt, dass keine vorangegangenen Deklarationen die Höhe des Elements beeinflussen.

width / height in px, % oder em?

Die meistgenutzten Angaben für die Breite / Höhe von Elementen sind px, em und %.

Pixel px
sind eine absolute Angabe. Wenn ein Block mit 200px Breite angegeben ist, dann ist er 200px breit, egal ob er auf einem Monitor mit 320px Breite oder mit einer Auflösung von 1980 x 1200 gerendert wird.
<div style="width: 200px;">
    <div style="width: 50%;"></div>
</div>
Prozent %
ist eine relative Angabe und beziehen sich auf die Breite bzw. Höhe des umfassenden Blocks.
.myDiv {
    width: 100vw;
    height: 100vh;
    background-color: red;
}
füllt das Browserfenster vollständig.
Viewport width / height
Angabe relativ zur Größe des Viewports bzw. Browserfensters.
em / rem
em ist eine Maßangabe relativ zur Schriftgröße des umfassenden Blocks. rem ist relativ zur Schriftgröße des html-Elements (16px)