Confira esta demonstração
Para visualizar o site, pressione Ver app. Em seguida, pressione Tela cheia .
Atualize o app em janelas de navegador de tamanhos diferentes para que o navegador carregue imagens diferentes e use layouts diferentes em diversos tamanhos de navegadores.
Ver o código
- Confira
index.html
para ver o código que faz isso funcionar:
<img src="flower.jpg"
srcset="flower-small.jpg 480w, flower-large.jpg 800w"
sizes="(max-width: 480px) 100vw, (max-width: 1024px) 50vw, 800px">
O que está acontecendo aqui?
O valor do atributo sizes
determina que a largura de exibição da imagem será:
"100% da largura da janela de visualização" em janelas de visualização de até 480 px de largura, "50% da largura
da janela de visualização" em telas de 481 a 1.024 px de largura e 800 px em telas com mais de 1.024 px. Essas larguras correspondem às especificadas no CSS.
A capacidade de especificar várias larguras de slot acomoda layouts de página que usam estilos diferentes (ou seja, larguras de imagem) para diferentes tamanhos de janela de visualização.
Como especificar várias larguras de slot
- Use uma lista separada por vírgulas para especificar várias larguras de espaço. Cada item da lista,
exceto o último, consiste em uma condição de mídia (por exemplo,
max-width
oumin-width
) e uma largura de slot. - O último item da lista é a largura padrão do espaço. Como esse é o padrão, não é necessário especificar uma condição de mídia.
- Você pode listar quantas larguras de slot quiser. O número de imagens listadas em
srcset
não importa. A largura do slot pode ser especificada com o uso de várias unidades. Todas as larguras abaixo são válidas:
100px
33vw
20em
calc(50vw-10px)
A largura a seguir não é válida:
25%
(as porcentagens não podem ser usadas com o atributo de tamanhos)