Breite und Höhe

Teil des Abschnitts Styling mit CSS der HTML-Journey von Coddy. Lektion 37 von 76.

In CSS werden die Eigenschaften width und height verwendet, um die Abmessungen des Inhaltsbereichs eines Elements festzulegen. Diese Eigenschaften sind wichtig, um die Größe und das Layout von Elementen auf deinen Webseiten zu steuern.

Hier ist die grundlegende Syntax für die Verwendung der Eigenschaften width und height:

selector {
    width: value;
    height: value;
}

width: Die Breite des Inhaltsbereichs des Elements.

height: Die Höhe des Inhaltsbereichs des Elements.

value: Der gewünschte Wert für die Breite oder Höhe, der in Pixeln (px), em (em), Prozent (%) oder anderen gültigen CSS-Einheiten angegeben werden kann. Du kannst auch das Schlüsselwort auto verwenden, damit der Browser die Breite oder Höhe automatisch anhand des Inhalts berechnet.

Zum Beispiel:

div {
    width: 300px;
    height: 200px;
}

img {
    width: 100%;
    height: auto;
}

In diesem Beispiel haben alle <div>-Elemente eine Breite von 300px und eine Höhe von 200px, während alle <img>-Elemente eine Breite haben, die 100 % der Breite ihres übergeordneten Elements einnimmt, und eine Höhe, die automatisch berechnet wird, um das Seitenverhältnis beizubehalten.

Aufgabe

Einfach

Dir erhältst ein HTML-Dokument mit einem Bereich (<div>) und einem Bild (<img>). Deine Aufgabe ist es, mithilfe der Eigenschaften width und height die Abmessungen dieser Elemente festzulegen. Folge den nachstehenden Schritten:

Schreibe eine CSS-Regel, die auf das Element <div> zielt. Setze width auf 400px und height auf 250px.
Schreibe eine CSS-Regel, die auf das Element <img> zielt. Setze width auf 300px und height auf auto.

Probier es selbst

<html>
<head>
    <title>Width and Height</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div style="border:2px solid black;">This is a division.</div>
    <img src="https://img.freepik.com/free-photo/abstract-luxury-gradient-blue-background-smooth-dark-blue-with-black-vignette-studio-banner_1258-54865.jpg" alt="Image">
</body>
</html>