As imagens
responsivas
costumam ser implementadas com o atributo
srcset
. O atributo srcset
é uma lista separada por vírgulas de nomes de arquivos de imagens
e os respectivos
descritores de
largura ou
densidade.
Para evitar mudanças de layout, defina os atributos width
e height
nas tags <img>
e
<source>
que usam srcset
.
Descritores de densidade
Para criar imagens responsivas que usam descritores de densidade:
- Todas as imagens listadas em
src
esrcset
precisam ter a mesma proporção. - Defina os atributos
width
eheight
para que correspondam às dimensões da imagem1x
. - O atributo
src
precisa se referir à imagem1x
.
Descritores de largura
Para criar imagens responsivas que usam descritores de largura:
- Todas as imagens listadas em
src
esrcset
precisam ter a mesma proporção. - Os atributos
width
eheight
precisam corresponder às dimensões da imagem substituta. - Ajuste o estilo da imagem conforme necessário. Sem o CSS, se você definir um
width
eheight
em uma imagem responsiva com descritores de largura, a imagem sempre será renderizada nesse tamanho definido. Isso acontece mesmo quando as imagens listadas emsrcset
têm dimensões variáveis. Esse pode não ser o comportamento desejado. Adicionewidth: 100%; height: auto;
ouwidth: 100vw; height: auto;
ao estilo da imagem para dar o visual que você quiser.
Elementos da imagem
Para criar elementos <picture>
responsivos:
- Defina os atributos
width
eheight
para todas as tags<source>
. Os valores adequados para esse atributo dependem de como a tag<source>
usasrcset
. - Ajuste a imagem definindo o estilo da tag
<img>
correspondente. A tag<source>
é um elemento vazio e, portanto, o estilo não tem efeito. - Defina os atributos
width
eheight
na tag<img>
. Esses valores precisam corresponder ao tamanho intrínseco da imagem substituta.
Exemplos
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>