HTML <imagem> Tag
Exemplo
Como usar a tag <picture>:
<picture>
<source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width:465px)" srcset="img_white_flower.jpg">
<img
src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
Definição e uso
A <picture>tag oferece aos desenvolvedores da Web mais flexibilidade na especificação de recursos de imagem.
O uso mais comum do <picture>elemento 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.
O <picture>elemento 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 <picture>elemento, como uma opção de fallback se nenhuma das tags de origem corresponder.
Dica: O <picture>elemento funciona "semelhante" a <video> e <audio>. Você configura fontes diferentes e a primeira fonte que se ajusta às preferências é a que está sendo usada.
Suporte ao navegador
Os números na tabela especificam a primeira versão do navegador que suporta totalmente o elemento.
| Element | |||||
|---|---|---|---|---|---|
| <picture> | 38.0 | 13.0 | 38.0 | 9.1 | 25.0 |
Atributos Globais
A <picture>tag também suporta os Atributos Globais em HTML .
Atributos do evento
A <picture>tag também suporta os atributos de evento em HTML .
Páginas relacionadas
Tutorial HTML: Elemento HTML <picture>
Tutorial CSS: Design Responsivo CSS - Imagens