Gewusst wie: Responsive Bilder
Erfahren Sie, wie Sie mit CSS ein responsives Bild erstellen.
Responsive Bilder werden automatisch an die Größe des Bildschirms angepasst.
Ändern Sie die Größe des Browserfensters, um den Responsive-Effekt zu sehen:
So erstellen Sie responsive Bilder
Schritt 1) HTML hinzufügen:
Beispiel
<img src="nature.jpg" alt="Nature" class="responsive">
Schritt 2) CSS hinzufügen:
Wenn Sie möchten, dass das Bild bei der Reaktionsfähigkeit sowohl nach oben als auch nach unten skaliert wird, setzen Sie die CSS - width
Eigenschaft auf 100 % und height
auf auto:
Beispiel
.responsive {
width: 100%;
height: auto;
}
If you want an image to scale down if it has to, but never scale up to be larger than its original size, use max-width: 100%
:
Example
.responsive {
max-width: 100%;
height: auto;
}
If you want to restrict a responsive image to a maximum size, use the max-width
property, with a
pixel value of your choice:
Example
.responsive {
width: 100%;
max-width:
400px;
height: auto;
}
Go to our CSS Images Tutorial to learn more about how to style images.
Go to our CSS RWD Tutorial to learn more about responsive web design.