CSS Breite und Höhe

Die Eigenschaften width und height bestimmen die Breite und Höhe eines Elements. Diese Werte beeinflussen das Layout und das responsive Verhalten grundlegend.

Grundlegende Eigenschaften

Zur Steuerung von Breite und Höhe können width, height, min-width, max-width, min-height und max-height verwendet werden. Damit lassen sich feste oder flexible Größen zuweisen.

Feste und flexible Größen

Im folgenden Beispiel zeigen wir, wie feste Größen sowie minimale und maximale Breiten angegeben werden können.

Die erste Box ist 200px breit und 100px hoch. Die zweite Box ist flexibel, mindestens 150px und höchstens 300px breit.

Prozentuale Größen

Die Breite kann auch in Prozent angegeben werden, dann richtet sich das Element nach der Breite des Elternelements.

Viewport-basierte Größen

Mit den Viewport-Einheiten (vw, vh) können wir die Größe von Elementen an die Breite und Höhe des Bildschirms anpassen. Zum Beispiel nimmt 100vw immer die gesamte Fensterbreite ein.

Im folgenden Beispiel nimmt die Box die gesamte Breite des Bildschirms und die Hälfte der Bildschirmhöhe ein.

Dynamische und flüssige Layouts

Mit den Funktionen min(), max() und clamp() können wir die Größen von Elementen flexibler steuern. Sie ermöglichen die Kombination von Minimal-, Maximal- und Idealgrößen.

Der folgende Code erstellt eine Box, deren Breite zwischen 200px und 600px bleibt, aber idealerweise 50% beträgt.

Tipps zur Verwendung von width und height

Die richtige Größenangabe ist entscheidend für ein responsives Design.

• Verwende Prozentwerte oder Viewport-Einheiten für responsive Layouts.
• Die min- und max-Werte verhindern, dass Elemente zu stark schrumpfen oder wachsen.
• Vermeide zu viele feste Größen, da dies die mobile Darstellung beeinträchtigen kann.