Esta página foi traduzida do inglês pela comunidade.Saiba mais e junte-se à comunidade MDN Web Docs.
<picture>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since março de 2016.
Oelemento HTML<picture> é um container usado para especificar múltiplos elementos<source> para um elemento específico<img> contido nele. O navegador irá escolher a imagem mais adequada de acordo com o layout atual da página, caracteristicas do dispositivo em que será exibido (p.e. um dispositivo normal ou um hiDPI), e a habilidade do navegador de renderizar um certo tipo de imagem (p.e., envie uma imagem WebP para os navegadores baseados no Chromium ou PNG para navegadores não-Chromium); se não houver correspondência entre os elementos<source>, o arquivo especificado pelo elemento<img> será selecionado. A imagem selecionada é então exibida no espaço ocupado pelo elemento<img>.
| Categorias de conteúdo | Conteúdo de fluxo,conteúdo fraseado,conteúdo embutido |
|---|---|
| Conteúdo permitido | Zero ou mais elementos<source>, seguidos de um elemento<img>, opcionalmente mesclado com elementos de suporte para scripts (por exemplo,<script> e<template>). |
| Omissão de tag | Nenhuma, as tags de abertura e fechamento são mandatórias |
| Parentes permitidos | Qualquer elemento que permita conteúdo embutido (embedded). |
| Papéis ARIA permitidos | Nenhum |
| Interface do DOM | HTMLPictureElement |
Atributos
Esse elemento só incluielementos globais.
Exemplo 1: Uso com atributomedia
O atributomedia permite você especificar uma media query que o navegador irá avaliar para selecionar um elemento<source> . Se a media query retornarfalso, o elemento<source> é ignorado.
<picture> <source srcset="mdn-logo-wide.png" media="(min-width: 600px)" /> <img src="mdn-logo-narrow.png" alt="MDN" /></picture>Exemplo 2: Uso com atributo type
O atributotype lhe permite especificar um tipo MIME para o(s) recurso(s) fornecido(s) no atributo srcset do elemento<source>. Se o navegador não suporta o tipo especificado, o elemento<source> é ignorado.
<picture> <source srcset="mdn-logo.svg" type="image/svg+xml" /> <img src="mdn-logo.png" alt="MDN" /></picture>Especificações
| Specification |
|---|
| HTML # the-picture-element |