As imagens
responsivas
geralmente são implementadas usando 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
.
Para 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
.
Para imagens responsivas que usam descritores de largura:
- 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 imagem substituta. - Ajuste o estilo da imagem conforme necessário:na ausência de estilos CSS, definir
width
eheight
em uma imagem responsiva que usa descritores de largura fará com que a imagem sempre seja renderizada no mesmo tamanho, mesmo que as imagens listadas emsrcset
tenham dimensões variadas. Esse comportamento pode não ser o desejado. Adicionarwidth: 100%; height: auto;
ouwidth: 100vw; height: auto;
ao estilo da imagem pode dar a aparência que você quer.
Para tags <picture>:
- Defina os atributos
width
eheight
para todas as tags<source>
:os valores apropriados parawidth
eheight
dependem de como a tag<source>
usasrcset
. Consulte as informações acima para saber como trabalhar com osrcset
. - Ajustar o estilo da imagem:se você precisar ajustar o estilo da imagem, lembre-se de que adicionar estilo a uma tag
<source>
não terá efeito. Uma tag<source>
é um elemento vazio. Em vez disso, será necessário definir o estilo da tag<img>
correspondente. - Defina os atributos
width
eheight
na tag<img>
:esses valores precisam corresponder ao tamanho intrínseco da imagem substituta.
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>