1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
|
---
title: <picture>
slug: Web/HTML/Element/picture
tags:
- Elemento
- HTML
- Imagens
- Referencia
- Web
- picture
translation_of: Web/HTML/Element/picture
---
<p>O <strong> elemento HTML <code><picture></code></strong> é um container usado para especificar múltiplos elementos {{HTMLElement("source")}} para um elemento específico {{HTMLElement("img")}} contido nele. O navegador irá escolher a imagem mais adequada de acordo com o layout atual da página, <span id="result_box" lang="pt"><span>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 </span></span>{{HTMLElement("source")}}, o arquivo especificado pelo elemento <code><img></code> será selecionado. A imagem selecionada é então exibida no espaço ocupado pelo elemento <code><img></code>.</p>
<table class="properties">
<tbody>
<tr>
<th scope="row"><a href="/pt-BR/docs/Web/Guide/HTML/Categorias_de_conteudo">Categorias de conteúdo</a></th>
<td><a href="/pt-BR/docs/Web/Guide/HTML/Categorias_de_conteudo#Conteúdo_de_fluxo">Conteúdo de fluxo</a>, <a href="/pt-BR/docs/Web/Guide/HTML/Categorias_de_conteudo#Conteúdo_fraseado">conteúdo fraseado</a>, <a href="/pt-BR/docs/Web/Guide/HTML/Categorias_de_conteudo#Conteúdo_embutido">conteúdo embutido</a></td>
</tr>
<tr>
<th scope="row">Conteúdo permitido</th>
<td>Zero ou mais elementos {{HTMLElement("source")}}, seguidos de um elemento {{HTMLElement("img")}}, opcionalmente mesclado com elementos de suporte para scripts (por exemplo, {{HTMLElement("script")}} e {{HTMLElement("template")}}).</td>
</tr>
<tr>
<th scope="row">Omissão de tag</th>
<td>Nenhuma, as tags de abertura e fechamento são mandatórias</td>
</tr>
<tr>
<th scope="row">Parentes permitidos</th>
<td>Qualquer elemento que permita conteúdo embutido (embedded).</td>
</tr>
<tr>
<th scope="row">Papéis ARIA permitidos</th>
<td>Nenhum</td>
</tr>
<tr>
<th scope="row">Interface do DOM</th>
<td>{{domxref("HTMLPictureElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="Atributos">Atributos</h2>
<p>Esse elemento só inclui <a href="/pt-BR/docs/Web/HTML/Global_attributes">elementos globais</a>.</p>
<h2 id="Exemplo_1_Uso_com_atributo_media">Exemplo 1: Uso com atributo <code>media</code> </h2>
<p>O atributo <code>media</code> permite você especificar uma media query que o navegador irá avaliar para selecionar um elemento {{HTMLElement("source")}} . Se a media query retornar <code>falso</code>, o elemento {{HTMLElement("source")}} é ignorado.</p>
<pre class="brush: html"><picture>
<source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
<img src="mdn-logo-narrow.png" alt="MDN">
</picture>
</pre>
<h2 id="Exemplo_2_Uso_com_atributo_type">Exemplo 2: Uso com atributo type</h2>
<p>O atributo <code>type</code> lhe permite especificar um tipo MIME para o(s) recurso(s) fornecido(s) no atributo srcset do elemento {{HTMLElement("source")}}. Se o navegador não suporta o tipo especificado, o elemento {{HTMLElement("source")}} é ignorado.</p>
<pre class="brush: html"><picture>
<source srcset="mdn-logo.svg" type="image/svg+xml">
<img src="mdn-logo.png" alt="MDN">
</picture>
</pre>
<h2 id="Especificações">Especificações</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-picture-element','<picture>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Basic support</td>
<td>38</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoDesktop("38")}}</td>
<td>Edge 13</td>
<td>25</td>
<td>9.1</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Edge</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>38</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoMobile("38")}}</td>
<td>{{CompatNo}}</td>
<td>25</td>
<td>iOS 9.3</td>
</tr>
</tbody>
</table>
</div>
<h2 id="Veja_também">Veja também</h2>
<ul>
<li>{{HTMLElement("img")}} element</li>
<li>{{HTMLElement("source")}} element</li>
</ul>
|
