Responsives Webdesign -Bilder
Verwenden der width-Eigenschaft
Wenn die Eigenschaft width auf 100% gesetzt ist, wird das Bild entsprechend den oberen und unteren Grenzen responsiv:
Beachten Sie, dass im obigen Beispiel das Bild größer als seine Originalgröße sein wird. Wir könnenmax-widthverwenden. Diese Eigenschaft löst dieses Problem gut.
Verwenden der max-width-Eigenschaft
Wenn die Eigenschaft max-width auf 100% gesetzt ist, wird das Bild niemals größer als seine Originalgröße sein:
Bilder zu einer Webseite hinzufügen
Hintergrundbilder
Hintergrundbilder können responsiv in der Größe geändert oder skaliert werden.
Im Folgenden finden Sie drei verschiedene Methoden:
1. Wenn die Eigenschaft background-size auf "contain" gesetzt ist, passt sich das Hintergrundbild proportional an den Inhaltsbereich an. Das Bild behält sein Seitenverhältnis bei:
Dies ist der CSS-Code:
Beispiel
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-repeat: no-repeat;
background-size: contain;
border: 1px solid red;
}
Selbst ausprobieren »
2. Wenn die Eigenschaft background-size auf "100% 100%" gesetzt ist, wird das Hintergrundbild gestreckt, um den gesamten Bereich abzudecken:
Beispiel
Dies ist der CSS-Code:
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: 100% 100%;
border: 1px solid red;
}
Selbst ausprobieren »
3. Wenn die Eigenschaft background-size auf "cover" gesetzt ist, wird das Hintergrundbild so weit vergrößert, dass es den Hintergrundbereich vollständig abdeckt. Beachten Sie, dass diese Eigenschaft das Seitenverhältnis des Bildes beibehält, sodass einige Teile des Hintergrundbildes möglicherweise nicht im Hintergrundpositionierungsbereich angezeigt werden.
Dies ist der CSS-Code:
Beispiel
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 1px solid red;
}
Selbst ausprobieren »
Verschiedene Geräte zeigen unterschiedliche Bilder an
Große Bilder können auf großen Bildschirmen angezeigt werden, aber auf kleinen Bildschirmen werden sie möglicherweise nicht gut angezeigt. Es ist nicht nötig, große Bilder auf kleinen Bildschirmen zu laden, da dies die Ladegeschwindigkeit beeinträchtigt. Daher können wir Media Queries verwenden, um unterschiedliche Bilder auf verschiedenen Geräten anzuzeigen.
Das folgende große Bild und das folgende kleine Bild werden auf unterschiedlichen Geräten angezeigt:
Beispiel
body {
background-image: url('img_smallflower.jpg');
}
/* Für Breiten von 400px und größer: */
@media only screen and (min-width: 400px) {
body {
background-image: url('img_flowers.jpg');
}
}
Selbst ausprobieren »
Sie können in Media Queries min-device-width anstelle der min-width-Eigenschaft verwenden. Dadurch wird die Gerätebreite statt der Browserbreite erfasst. Wenn die Browsergröße zurückgesetzt wird, ändert sich die Bildgröße nicht.
Beispiel
body {
background-image: url('img_smallflower.jpg');
}
/* Geräte größer als 400px (oder gleich): */
@media only screen and (min-device-width: 400px) {
body {
background-image: url('img_flowers.jpg');
}
}
Selbst ausprobieren »
HTML5-<picture>-Element
HTML5s<picture>Das Element kann mehrere Bilder enthalten.
Browser-Unterstützung
| element | |||||
|---|---|---|---|---|---|
| <picture> | Nicht unterstützt | 38.0 | 38.0 | Nicht unterstützt | 25.0 |
<picture>Das Element ist ähnlich wie<video>und<audio>Das Element. Verschiedene Ressourcen können bereitgestellt werden, wobei die zuerst festgelegte Ressource die bevorzugte ist:
Beispiel
<source srcset="img_smallflower.jpg" media="(max-width: 400px)">
<source srcset="img_flowers.jpg">
<img src="img_flowers.jpg" alt="Flowers">
</picture>
Selbst ausprobieren »
srcsetDas Attribut ist erforderlich und definiert die Bildressource.
mediaDas Attribut ist optional und kann in Media Queries verwendet werden.CSS @media-RegelDetails anzeigen.
Für diejenigen, die nicht unterstützen<picture>Den Browser des Elements können Sie auch definieren.<img>Verwenden Sie stattdessen ein Element.