Flexible Bilder

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

Im Responsive Webdesign passen sich flexible Bilder automatisch an verschiedene Bildschirmgrößen an, um sicherzustellen, dass sie auf allen Geräten gut aussehen. Ohne Flexibilität können Bilder auf kleinen Bildschirmen zu groß sein oder das Layout sprengen.

So machen Sie Bilder flexibel:

1. CSS max-width verwenden
Das Festlegen von max-width: 100% stellt sicher, dass Bilder niemals die Breite ihres Containers überschreiten.

img {
  max-width: 100%;
  height: auto; /* Behält das Seitenverhältnis bei */
}

2. Viewport-Einheiten verwenden
Sie können die Größe von Bildern mit vw (Viewport-Breite) anpassen, damit sie mit der Bildschirmgröße skalieren.

img {
  width: 50vw; /* Bild nimmt 50 % der Viewport-Breite ein */
}

Aufgabe

Einfach

Sie erhalten ein HTML-Dokument mit einem Bild. Ihre Aufgabe ist es, das Bild responsiv zu gestalten, damit es sich an verschiedene Bildschirmgrößen anpasst.

Schreiben Sie eine CSS-Regel, die alle Elemente mit der Klasse img-max anspricht. Setzen Sie deren max-width auf 100% und deren height auf auto.
Schreiben Sie eine CSS-Regel, die alle Elemente mit der Klasse img-vw anspricht. Setzen Sie deren width auf 50vw und deren height auf auto.

Spickzettel

Flexible Bilder passen sich im Responsive Webdesign automatisch an verschiedene Bildschirmgrößen an.

Verwendung von max-width:

img {
  max-width: 100%;
  height: auto; /* Behält das Seitenverhältnis bei */
}

Verwendung von Viewport-Einheiten:

img {
  width: 50vw; /* Bild nimmt 50 % der Viewport-Breite ein */
}

Probier es selbst

<html>
<head>
    <title>Flexible Images</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body style="background-color:lightblue">
     <div class="container">
        <h2>Image with max-width: 100%</h2>
        <img class="img-max" src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Adelie_penguins_in_the_South_Shetland_Islands.jpg" alt="Max-Width Image">
    </div>

    <div class="container">
        <h2>Image with width: 50vw</h2>
        <img class="img-vw" src="https://upload.wikimedia.org/wikipedia/commons/4/40/Adelie_Penguins_on_iceberg.jpg">
    </div>
</body>
</html>