Responsive Bilder werden häufig mit dem Attribut srcset
implementiert. Das Attribut srcset
ist eine durch Kommas getrennte Liste mit Bilddateinamen und ihren Deskriptoren für Breite oder Dichte. Um Layoutverschiebungen zu vermeiden, legen Sie die Attribute width
und height
für <img>
- und <source>
-Tags fest, die srcset
verwenden.
Für responsive Bilder mit Dichtedeskriptoren:
- Alle in
src
undsrcset
aufgeführten Bilder sollten dasselbe Seitenverhältnis haben. - Lege die Attribute
width
undheight
so fest, dass sie mit den Abmessungen des Bildes1x
übereinstimmen. - Das Attribut
src
sollte sich auf das Bild1x
beziehen.
Bei responsiven Bildern mit Breitendeskriptoren:
- Alle in
src
undsrcset
aufgeführten Bilder müssen dasselbe Seitenverhältnis haben. - Legen Sie die Attribute
width
undheight
so fest, dass sie mit den Abmessungen des Fallback-Bilds übereinstimmen. - Bildstil nach Bedarf anpassen:Wenn es keinen CSS-Stil gibt, wird das Bild immer in derselben Größe gerendert, wenn Sie
width
undheight
für ein responsives Bild mit Breitendeskriptoren festlegen. Das gilt auch dann, wenn die insrcset
aufgeführten Bilder unterschiedliche Abmessungen haben. Dieses Verhalten ist möglicherweise nicht Ihren Vorstellungen. Wenn du deinem Bildstilwidth: 100%; height: auto;
oderwidth: 100vw; height: auto;
hinzufügst, erhältst du möglicherweise das gewünschte visuelle Erscheinungsbild.
Für <picture>-Tags:
- Legen Sie die Attribute
width
undheight
für alle<source>
-Tags fest: Die geeigneten Werte fürwidth
undheight
hängen davon ab, wiesrcset
im<source>
-Tag verwendet wird. Informationen zur Arbeit mitsrcset
finden Sie oben. - Bildstil anpassen:Wenn Sie den Bildstil anpassen müssen, hat das Hinzufügen von Stilen zu einem
<source>
-Tag keine Auswirkungen. Ein<source>
-Tag ist ein leeres Element. Stattdessen müssen Sie das entsprechende<img>
-Tag gestalten. - Legen Sie die Attribute
width
undheight
im Tag<img>
fest: Diese Werte sollten der intrinsischen Größe des Fallback-Bildes entsprechen.
HTML
<!-- Using density descriptors -->
<img width="480" height="330"
srcset="cat-1x.jpg, cat-2x.jpg 2x, cat-3x.jpg 3x"
src="cat-1x.jpg"
alt="Photo of a cat on a green background">
<!-- Using width descriptors -->
<img width="256" height="128"
srcset="dog-256w.jpg 256w, dog-512w.jpg 512w, dog-1028w.jpg 1028w"
src="dog-256w.jpg"
alt="Photo of a dog on a orange background">
<!-- Picture tag -->
<picture>
<source media="(max-width: 720px)" width="600" height="300" srcset="newyork-rectangle.jpg" />
<source media="(min-width: 721px)" width="600" height="600" srcset="newyork-square-1x.jpg, newyork-square-2x.jpg 2x, newyork-square-3x.jpg 3x" />
<img src="newyork-rectangle.jpg" width="600" height="300" alt="Photo of the Empire State Building">
</picture>