Obrazy elastyczne są często implementowane z użyciem atrybutu srcset
. Atrybut srcset
to rozdzielona przecinkami lista nazw plików obrazów i ich deskryptorów width lub gęstości.
Aby zapobiec przesunięciu układu, ustaw atrybuty width
i height
w tagach <img>
i <source>
, które używają srcset
.
Deskryptory gęstości
Aby utworzyć obrazy elastyczne, które używają deskryptorów gęstości:
- Wszystkie obrazy wymienione w
src
isrcset
powinny mieć ten sam współczynnik proporcji. - Ustaw atrybuty
width
iheight
, tak aby pasowały do wymiarów obrazu1x
. - Atrybut
src
powinien się odwoływać do obrazu1x
.
Deskryptory szerokości
Aby utworzyć obrazy elastyczne, które używają deskryptorów szerokości:
- Wszystkie obrazy w usługach
src
isrcset
powinny mieć ten sam format obrazu. - Atrybuty
width
iheight
powinny pasować do wymiarów obrazu zastępczego. - Dostosuj styl obrazu do swoich potrzeb. Jeśli ustawisz atrybuty
width
iheight
dla obrazu elastycznego z deskryptorami szerokości, bez CSS, obraz zawsze będzie renderowany w określonym rozmiarze. Dzieje się tak nawet wtedy, gdy obrazy wymienione w polusrcset
mają różne wymiary. Takie działanie może nie być oczekiwane. Dodajwidth: 100%; height: auto;
lubwidth: 100vw; height: auto;
do stylu obrazu, aby uzyskać odpowiedni wygląd.
Elementy obrazu
Aby utworzyć elastyczne elementy <picture>
:
- Ustaw atrybuty
width
iheight
dla wszystkich tagów<source>
. Odpowiednie wartości tego atrybutu zależą od tego, jak tag<source>
używasrcset
. - Dostosuj obraz, określając styl odpowiedniego tagu
<img>
. Tag<source>
jest pustym elementem, więc styl nie ma na niego wpływu. - Ustaw atrybuty
width
iheight
w tagu<img>
. Wartości te powinny pasować do wewnętrznego rozmiaru obrazu zastępczego.
Przykłady
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>