Especificar várias larguras de slot

Katie Hempenius
Katie Hempenius
X

Teste esta demonstração

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

  • Recarregue o app em janelas de navegador de tamanhos diferentes para ver o navegador carregar imagens diferentes e usar layouts diferentes em tamanhos de navegador diferentes.

Ver o código

  • Confira o código que faz isso funcionar em index.html:
<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 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 de largura. Essas larguras correspondem às especificadas no CSS.

A capacidade de especificar várias larguras de espaço acomoda layouts de página que usam estilos diferentes (ou seja, larguras de imagem) para tamanhos de janela de visualização diferentes.

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 espaço.
  • O último item dessa lista é a largura padrão do espaço. Como é 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 usando várias unidades. Estas são as larguras válidas:

  • 100px

  • 33vw

  • 20em

  • calc(50vw-10px)

A largura a seguir não é válida:

  • 25% (não é possível usar porcentagens com o atributo sizes)