Html picture

Postado: 6 de julho de 2022

Html picture

A tag html picture oferece aos desenvolvedores da Web mais flexibilidade na especificação de recursos de imagem.

O uso mais comum do elemento  <picture> será para direção de arte em designs responsivos. 

Em vez de ter uma imagem que é dimensionada para cima ou para baixo com base na largura da janela de visualização, várias imagens podem ser projetadas para preencher melhor a janela de visualização do navegador.

Veja o exemplo no código.

Copie o código abaixo e redimensione a janela do navegador para carregar imagens diferentes.

<picture>
  <source media="(min-width:768px)" srcset="img_capa_tablet.jpg">
  <source media="(min-width:480px)" srcset="img_capa_phone.jpg">
  <img src="img_capa.jpg" alt="Capa" title="Capa" style="width:auto;">
</picture>

O elemento  <picture> contém duas tags: uma ou mais tags <source> e uma tag <img>.

O navegador procurará o primeiro elemento <source> onde a consulta de mídia corresponde à largura da janela de visualização atual e, em seguida, exibirá a imagem adequada (especificada no atributo srcset). O elemento <img> é necessário como o último filho do elemento <picture>, como uma opção de fallback se nenhuma das tags de origem corresponder.

Dica: O elemento  <picture> funciona semelhante a tag <video> e <audio>. 

Você configura fontes diferentes e a primeira fonte que se ajusta às preferências é a que está sendo usada.

Publicado por: loopnerd

55 Visualizações

Deixe um comentário

O seu endereço de e-mail não será publicado.

Artigos Relacionados