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