Manual de Referência HTML

大全 de etiquetas HTML

HTML: <picture> elemento

O elemento <picture> do HTML inclui zero ou mais elementos <source> e um elemento <img> para diferentes exibições/Fornecem versões de imagem para diferentes cenários de dispositivos. O navegador escolherá o subelemento <source> mais adequado, e se não houver correspondência, escolherá a URL do atributo src do elemento <img>. Em seguida, a imagem escolhida será exibida no espaço ocupado pelo elemento <img>.

Exemplo

Exibe imagens diferentes com base no tamanho da tela, se não houver correspondência ou se o navegador não suportar a propriedade picture, usa-se o elemento img:

Exemplo

<!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">
<title>Manual Básico(oldtoolbag.com)</title>
</head>
<body>
<h2>elemento picture</h2>
<picture>
　　<source　media="(min-width:　650px)"　srcset="/run/html/views.png">
　　<source　media="(min-width:　465px)"　srcset="/run/html/default.jpg">
　　<img　src="/run/html/haha.gif"　　style="width:auto;">
</picture>
</body>
</html>

Teste e veja ‹/›

Definição

O elemento picture permite que mostremos diferentes imagens em diferentes dispositivos, geralmente usado em responsivo.

HTML5 Introduzido o elemento <picture>, que pode ajustar mais flexívelmente a imagem do recurso.

O elemento <picture> zero ou mais elementos <source> e um <img>, cada <source> elemento coincide com diferentes dispositivos e referência diferentes imagens de origem, se não houver correspondência, escolhe o atributo src do elemento <img>.

Atenção: 　　　　

　　　　　　　　O elemento <img> é colocado no último 　<picture> Elemento, se o navegador não suportar a propriedade, exibe a imagem do elemento <img>. 　　　　

Suporte do navegador

Os números na tabela representam a primeira versão do navegador que suporta o elemento.

IEFirefoxOperaChromeSafari

HTML 4.01 e HTML5 Diferenças entre

O atributo <picture> é do HTML5 Novamente definidos.

Atributos globais

Suporte ao <picture> etiqueta Atributos globais do HTML.

Atributos de evento

Suporte ao <picture> etiqueta Atributos de evento do HTML.

HTML: <q> etiqueta HTML: <pre> etiqueta