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 conferir o carregamento do navegador. imagens diferentes e usar layouts diferentes em tamanhos de navegador diferentes.
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 janela
largura" em telas com largura de 481 a 1.024 pixels e largura de 800 pixels em telas com mais de 1.024 pixels. Esses
as larguras correspondem às especificadas no CSS.
A capacidade de especificar várias larguras de espaço é compatível com layouts de página que usam estilo diferente (isto é, 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,
com exceção do último item, 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 slot. Ele é o padrão, ou seja, não é preciso 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. Os seguintes são todos larguras válidas:
100px
33vw
20em
calc(50vw-10px)
O seguinte não é uma largura válida:
25%
(as porcentagens não podem ser usadas com o atributo de tamanhos)