Verwenden der Breite Property
Wenn die width Eigenschaft auf 100% gesetzt wird, wird das Bild ansprechen und Tonleiter rauf und runter:
Beachten Sie, dass in dem obigen Beispiel kann das Bild skaliert werden, größer zu sein als die Originalgröße. Eine bessere Lösung, in vielen Fällen wird die zu verwenden max-width statt Eigenschaft.
Verwenden der max-width Eigenschaft
Wenn die max-width - Eigenschaft auf 100% eingestellt ist, wird das Bild verkleinern, wenn sie hat, aber nie größer sein skalieren als die Originalgröße:
Fügen Sie ein Bild auf das Beispiel Web-Seite
background Images
Hintergrundbilder können auch auf die Größenänderung und Skalierung reagieren.
Hier werden wir drei verschiedene Methoden zeigen:
1. Wenn der background-size - Eigenschaft auf "enthalten", wird das Hintergrundbild skalieren, und versuchen , den Content - Bereich zu passen. Allerdings wird das Bild sein Seitenverhältnis beibehalten (die proportionale Beziehung zwischen der Breite des Bildes und Höhe):
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;
} Versuch es selber " 2. Wenn der background-size - Eigenschaft auf "100% 100%" eingestellt ist, wird das Hintergrundbild strecken , um den gesamten Inhalt zu decken:
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;
} Versuch es selber " 3. Wenn der background-size - Eigenschaft auf "cover" , wird das Hintergrundbild skalieren Sie den gesamten Inhalt Bereich abzudecken. Beachten Sie, dass die "cover" Wert des Seitenverhältnisses hält, und ein Teil des Hintergrundbildes möglicherweise abgeschnitten:
Hier ist der CSS-Code:
Beispiel
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 1px solid red;
} Versuch es selber " Verschiedene Bilder für verschiedene Geräte
Ein großes Bild kann auf einem großen Computer-Bildschirm, aber nutzlos auf einem kleinen Gerät perfekt sein. Warum ein großes Bild zu laden, wenn Sie es zu skalieren haben ohnehin nach unten? Um die Last, oder aus anderen Gründen zu reduzieren, können Sie Medienanfragen verwenden, um verschiedene Bilder auf verschiedenen Geräten angezeigt werden soll.
Hier ist ein großes Bild und ein kleineres Bild, das 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');
}
} Versuch es selber " Sie können die Medien - Abfrage verwenden min-device-width anstelle von min-width , die die Gerätebreite überprüft, anstelle der Browserbreite. Dann wird das Bild nicht ändern, wenn Sie das Browser-Fenster Größe ä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');
}
} Versuch es selber " HTML5 <picture> Element
HTML5 eingeführt , um die <picture> Element, das Sie mehr als ein Bild definieren lässt.
Browser-Unterstützung
| Element | |||||
|---|---|---|---|---|---|
| <picture> | Nicht unterstützt | 38.0 | 38.0 | Nicht unterstützt | 25.0 |
Die <picture> Element funktioniert ähnlich dem <video> und <audio> Elemente. Sie setzen unterschiedliche Quellen auf, und die erste Quelle, die die Vorlieben passt, ist derjenige verwendet:
Beispiel
<picture>
<source srcset="img_smallflower.jpg" media="(max-width:
400px)">
<source srcset="img_flowers.jpg">
<img
src="img_flowers.jpg" alt="Flowers">
</picture> Versuch es selber " Das srcset Attribut ist erforderlich, und definiert die Quelle des Bildes.
Das media - Attribut ist optional, und akzeptiert die Medien - Anfragen Sie finden CSS @ media - Regel .
Sie sollten auch ein definieren <img> Element für Browser , die das nicht unterstützen <picture> Element.