CSS, HTML und Javascript mit {stil}

CSS width / height • Breite und Höhe

CSS width CSS height: Wenn der Inhalt überfließt

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

CSS width oder height begrenzen zwar den Raum, aber übergroße Inhalte fließen dabei über.

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.

  • Die Breite eines Elements wird durch die CSS-Eigenschaft width fest begrenzt.
  • Die Höhe eines HTML-Blocks ist hingegen nur ein Anfangswert!
    Wenn der Inhalt für das umfassende Element zu groß ist, fließt er weiter, auch wenn die Höhe der Box als CSS-Eigenschaft height angegeben ist. Das Überfließen kann nur durch CSS overflow verhindert werden, wobei übergroße Inhalte nicht mehr angezeigt werden.
  • Während padding zur Breite eines Elements gezählt wird, zählen die modernen Browser padding, border und margin nicht zur Höhe eines Elements hinzu.
    Erst CSS 3 border-box macht die Kombination von width, height, padding und border intuitiver.

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 width und height werden also nur eingehalten, wenn die Inhalte vollständig in das Element passen oder kleiner als der vorgesehene Raum sind.

Für das responsive Webdesign passt das 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> | <percentage> | 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.