Responsives Webdesign - Bilder
Ändern Sie die Größe des Browserfensters, um zu sehen, wie das Bild skaliert wird, um es an die Seite anzupassen.
Verwendung der width-Eigenschaft
Wenn die widthEigenschaft auf einen Prozentsatz und die heightEigenschaft auf „auto“ eingestellt ist, reagiert das Bild und wird nach oben und unten skaliert:
Beispiel
img {
width: 100%;
height: auto;
}
Beachten Sie, dass das Bild im obigen Beispiel vergrößert werden kann, sodass es größer als seine ursprüngliche Größe ist. In vielen Fällen ist es eine bessere Lösung,
max-widthstattdessen die Immobilie zu nutzen.
Verwendung der max-width-Eigenschaft
Wenn die max-widthEigenschaft auf 100 % eingestellt ist, wird das Bild bei Bedarf verkleinert, aber niemals größer als seine ursprüngliche Größe skaliert:
Beispiel
img {
max-width: 100%;
height: auto;
}
Fügen Sie der Beispiel-Webseite ein Bild hinzu
Beispiel
img {
width: 100%;
height: auto;
}
Hintergrundbilder
Hintergrundbilder können auch auf Größenänderung und Skalierung reagieren.
Hier zeigen wir drei verschiedene Methoden:
1. Wenn die background-sizeEigenschaft auf „enthalten“ gesetzt ist, wird das Hintergrundbild skaliert und versucht, den Inhaltsbereich einzupassen. Das Bild behält jedoch sein Seitenverhältnis (das proportionale Verhältnis zwischen Breite und Höhe des Bildes):
Hier ist der CSS-Code:
Beispiel
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-repeat: no-repeat;
background-size: contain;
border: 1px solid red;
}
2. Wenn die background-sizeEigenschaft auf „100 % 100 %“ eingestellt ist, wird das Hintergrundbild gestreckt, um den gesamten Inhaltsbereich abzudecken:
Hier ist der CSS-Code:
Beispiel
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: 100% 100%;
border: 1px solid red;
}
3. Wenn die background-sizeEigenschaft auf „Cover“ eingestellt ist, wird das Hintergrundbild so skaliert, dass es den gesamten Inhaltsbereich abdeckt. Beachten Sie, dass der Wert „cover“ das Seitenverhältnis beibehält und ein Teil des Hintergrundbilds möglicherweise abgeschnitten wird:
Hier ist der CSS-Code:
Beispiel
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 1px solid red;
}
Unterschiedliche Bilder für unterschiedliche Geräte
Ein großes Bild kann auf einem großen Computerbildschirm perfekt, aber auf einem kleinen Gerät nutzlos sein. Warum ein großes Bild laden, wenn man es sowieso verkleinern muss? Um die Last zu reduzieren oder aus anderen Gründen, können Sie Medienabfragen verwenden, um unterschiedliche Bilder auf verschiedenen Geräten anzuzeigen.
Hier ist ein großes Bild und ein kleineres Bild, die auf verschiedenen Geräten angezeigt werden:
Beispiel
/* For width smaller than 400px: */
body {
background-image:
url('img_smallflower.jpg');
}
/*
For width 400px and larger: */
@media only screen and (min-width: 400px)
{
body {
background-image: url('img_flowers.jpg');
}
}
Sie können die Medienabfrage min-device-widthanstelle von verwenden min-width, die die Gerätebreite anstelle der Browserbreite überprüft. Dann ändert sich das Bild nicht, wenn Sie die Größe des Browserfensters ändern:
Beispiel
/* For devices smaller than 400px: */
body {
background-image:
url('img_smallflower.jpg');
}
/*
For devices 400px and larger: */
@media only screen and (min-device-width: 400px)
{
body {
background-image: url('img_flowers.jpg');
}
}
Das HTML <Bild>-Element
Das HTML <picture>-Element gibt Webentwicklern mehr Flexibilität bei der Angabe von Bildressourcen.
The most common use of the <picture>
element will be for images used in responsive designs. Instead of having one
image that is scaled up or down based on the viewport width, multiple images can
be designed to more nicely fill the browser viewport.
The <picture> element works similar to the <video> and
<audio> elements. You set up different sources, and the first source that fits the
preferences is the one being used:
Example
<picture>
<source srcset="img_smallflower.jpg" media="(max-width:
400px)">
<source srcset="img_flowers.jpg">
<img
src="img_flowers.jpg" alt="Flowers">
</picture>
The srcset attribute is required, and defines the source of the image.
The media attribute is optional, and accepts the media queries you find in
CSS @media rule.
You should also define an <img> element for browsers that do not support the
<picture> element.