Breite und Höhe

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

In CSS werden die width- und height-Eigenschaften verwendet, um die Dimensionen des Inhaltsbereichs eines Elements festzulegen. Diese Eigenschaften sind wesentlich für die Steuerung der Größe und des Layouts von Elementen auf Ihren Webseiten.

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 Breiten- oder Höhenwert, der in Pixeln (px), Ems (em), Prozentsätzen (%) oder anderen gültigen CSS-Einheiten angegeben werden kann. Sie können auch das Schlüsselwort auto verwenden, um den Browser die Breite oder Höhe automatisch basierend auf dem Inhalt berechnen zu lassen.

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 Elternelements einnimmt, und eine Höhe, die automatisch berechnet wird, um das Seitenverhältnis beizubehalten.

Aufgabe

Einfach

Sie erhalten ein HTML-Dokument mit einem Bereich (<div>) und einem Bild (<img>). Ihre Aufgabe ist es, die Eigenschaften width und height zu verwenden, um die Dimensionen dieser Elemente festzulegen. Befolgen Sie die folgenden Schritte:

Schreiben Sie eine CSS-Regel, die das <div>-Element anspricht. Setzen Sie die width auf 400px und die height auf 250px.
Schreiben Sie eine CSS-Regel, die das <img>-Element anspricht. Setzen Sie die width auf 300px und die height auf auto.

Spickzettel

Die Eigenschaften width und height steuern die Dimensionen des Inhaltsbereichs eines Elements:

selector {
    width: value;
    height: value;
}

Werte können in Pixeln (px), Ems (em), Prozent (%) angegeben werden, oder verwenden Sie auto für die automatische Berechnung:

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

img {
    width: 100%;
    height: 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>