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 entscheidend für die Kontrolle der Größe und des Layouts von Elementen auf deinen 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 Wert für Breite oder Höhe, der in Pixeln (px), ems (em), Prozentangaben (%) 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

Du erhältst ein HTML-Dokument mit einer division (<div>) und einem Bild (<img>). Deine Aufgabe besteht darin, die Eigenschaften width und height zu verwenden, um die Abmessungen dieser Elemente festzulegen. Befolge die folgenden Schritte:

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

REQUIRED OUTPUT FORMAT: [Your translated content here]

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>