Especificar várias larguras de slot

Katie Hempenius

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 ou min-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)