Responsive Web Design - Foto
Verwenden Sie das Attribut width
Wenn die Breite Attribut auf 100% gesetzt wird, wird das Bild mit dem oberen und unteren Bereich der ansprechenden Funktionen entsprechend realisiert werden:
Man beachte, daß als das Originalbild in dem obigen Beispiel, wird das Bild größer sein. Wir können max-width verwenden , um eine gute Lösung für dieses Problem zuzuschreiben.
Mit max-width Eigenschaft
Wenn die max-width-Eigenschaft auf 100% eingestellt ist, wird das Bild nie als seine ursprüngliche Größe größer sein:
Bild hinzufügen Seiten
Hintergrundbild
Hintergrundbild kann reagieren oder Zoom zu ändern.
Im Folgenden sind drei verschiedene Methoden:
1. Wenn der Hintergrund-size-Eigenschaft auf "enthalten", wird das Hintergrundbild adaptive Inhaltsbereich Verhältnis sein. Fotos halten die Proportionen unverändert:
Dies ist der CSS-Code:
Beispiele
Breite: 100%;
Höhe: 400px;
background-image: url ( 'img_flowers.jpg ');
background-repeat: no-repeat;
Hintergrund-size: enthalten;
border: 1px solid red;
}
Versuchen »
2. Wenn der Hintergrund-size-Eigenschaft auf "100% 100%" eingestellt ist, wird das Hintergrundbild erweitert werden, um die gesamte Region zu decken:
Beispiele
Dies ist der CSS-Code:
Breite: 100%;
Höhe: 400px;
background-image: url ( 'img_flowers.jpg ');
Hintergrund-size: 100% 100% ;
border: 1px solid red;
}
Versuchen »
3. Wenn die Eigenschaft background-Größe wird auf "abdecken", wird das Hintergrundbild erweiterten Bereich den Hintergrund groß genug sein, um vollständig zu bedecken, so dass das Hintergrundbild. Beachten Sie, dass die Eigenschaft die Proportionen des Bildes bleibt so ein Teil des Hintergrundbildes nicht im Hintergrund Positionierung Bereich angezeigt werden kann.
Dies ist der CSS-Code:
Beispiele
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 1px solid red;
}
Versuchen »
Verschiedene Geräte zeigen ein anderes Bild
Große Bilder können auf dem großen Bildschirm angezeigt, aber sie zeigen nicht gut auf dem kleinen Bildschirm. Wir brauchen nicht den kleinen Bildschirm in das große Bild zu laden, so dass es die Ladegeschwindigkeit auswirkt. So können wir Medienanfragen, je nach Gerät verwenden, um ein anderes Bild anzuzeigen.
Die folgende große Bild und kleine Bild wird auf verschiedenen Geräten angezeigt werden:
Beispiele
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');
}
}
Versuchen »
Sie können Medien-Anfragen min-device-width Ersatz min-width-Attribut verwenden, wird es die Gerätebreite statt des Browser-Breite zu erfassen. Setzen Sie die Browsergröße, Bildgröße ändert sich nicht.
Beispiele
body {
background-image: url ( 'img_smallflower.jpg ');
}
/ * Geräte größer als 400px (auch gleich): * /
@media nur Bildschirm und (min-Gerät -width: 400px) {
body {
background-image: url ( 'img_flowers.jpg ');
}
}
Versuchen »
HTML5 <Bild> -Element
HTML5 ist <picture> Element kann mehrere Bilder eingestellt werden.
Browser-Unterstützung
| Element | |||||
|---|---|---|---|---|---|
| <Bild> | Nicht unterstützt | 38.0 | 38.0 | Nicht unterstützt | 25.0 |
<picture> Element ähnlich dem <video> und <audio> Elemente. Verschiedene Geräte können Ressourcen, Ressourcen werden zunächst bevorzugte Verwendung festgelegt:
Beispiele
<Source srcset = "img_smallflower.jpg" media = "(max-width: 400px)">
<Source srcset = "img_flowers.jpg">
<Img src = "img_flowers.jpg" alt = "Flowers">
</ Bild>
Versuchen »
srcset Eigenschaft muss die Definition der Bildressource sein.
media - Attribut ist optional, in Medien - Anfragen CSS @media Regel Siehe Details.
unterstützen Sie nicht <picture> Browser - Elemente können Sie definieren <img> Element statt.