Etiqueta <picture> HTML

Definição e uso

<picture> A tag oferece mais flexibilidade aos desenvolvedores web ao especificar recursos de imagem.

<picture> A utilização mais comum do elemento é na direção artística do design responsivo. É possível projetar várias imagens para melhor preencher a viewport do navegador, em vez de dimensionar ou redimensionar uma imagem em proporção à largura da viewport.

<picture> O elemento contém dois rótulos: um ou mais <source> tag e um <img> tag.

O navegador procurará o primeiro elemento <source> que correspondente à consulta de mídia com a largura atual da viewport, e então ele exibirá a imagem correta (especificada no atributo srcset). O elemento <img> é usado como <picture> O último filho do elemento é necessário, usado como opção de reserva quando nenhum rótulo source combina.

Dica：<picture> A maneira como os elementos <video> e <audio> Semelhante. Você pode configurar diferentes fontes, e a primeira fonte com preferência será usada.

Veja também：

Tutorial de HTML：Elemento <picture> HTML

Tutorial de CSS：Design Responsivo CSS - Imagens

Exemplo

<picture> Método de uso do tag:

<picture>
  <source media="(min-width:650px)" srcset="flowers-1.jpg">
  <source media="(min-width:465px)" srcset="flowers-2.jpg">
  <img src="flowers-3.jpg" alt="Flowers" style="width:auto;">
</picture>

Experimente você mesmo

Atributos Globais

<picture> O tag também suporta Atributos Globais no HTML.

Atributos de Evento

<picture> O tag também suporta Atributos de Evento no HTML.

Suporte do Navegador

Os números na tabela indicam a versão do navegador que suportou o primeiro o tag.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
38.0 13.0 38.0 9.1 25.0