Especificar várias larguras de slot

Katie Hempenius

Para acompanhar este codelab, abra este Glitch em uma segunda guia.

Teste esta demonstração

• Para visualizar o site, pressione View App. Em seguida, pressione Fullscreen .

• Recarregue o app em janelas de navegador de tamanhos diferentes para ver o navegador carregar imagens diferentes e usar layouts diferentes em tamanhos 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 até 480 pixels de largura, "50% da largura da janela" em telas de 481 a 1024 pixels de largura e 800 pixels em telas com mais de 1024 pixels. 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 tamanhos de viewport diferentes.

Como especificar várias larguras de slot

• Use uma lista separada por vírgulas para especificar várias larguras de slot. Cada item da lista, exceto o último, consiste em uma condição de mídia (por exemplo, max-width ou min-width) e uma largura de slot.
• O último item da lista é a largura de slot padrão. É o padrão, então não é necessário especificar uma condição de mídia.
• É possível listar quantas larguras de slot quiser. O número de imagens listadas em srcset não importa.

• A largura do slot pode ser especificada usando várias unidades. As seguintes são 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 "tamanhos")