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
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
|
---
title: <picture>
slug: Web/HTML/Elemento/picture
tags:
- Elemento
- Fotografía
- Imagen
- graficos
translation_of: Web/HTML/Element/picture
---
<div>{{HTMLRef}}{{SeeCompatTable}}</div>
<p>El <strong>elemento HTML <code><picture></code> </strong>es un contenedor usado para especificar múltiples elementos {{HTMLElement("source")}} y un elemento {{HTMLElement("img")}} contenido en él para proveer versiones de una imagen para diferentes escenarios de dispositivos. Si no hay coincidencias con los elementos <code><source></code>, el archivo especificado en los atributos {{htmlattrxref("src", "img")}} del elemento <code><img></code> es utilizado. La imagen seleccionada es entonces presentada en el espacio ocupado por el elemento <code><img></code>.</p>
<p>Para seleccionar la imagen óptima, el {{Glossary("user agent")}} examina cada atributo {{htmlattrxref("srcset", "source")}}, {{htmlattrxref("media", "source")}}, y {{htmlattrxref("type", "source")}} de la fuente para seleccionar la imagen compatible.</p>
<p>El navegador escogerá la fuente más apropiada de acuerdo al diseño de la página (las limitaciones de la caja donde aparecerá la imagen) y el dispositivo que se utilize para visualizarla (p.ej. pantalla normal o hiDPI).</p>
<table class="properties">
<tbody>
<tr>
<th scope="row"><a href="/es-ES/docs/Web/HTML/Content_categories">Categorías de contenido</a></th>
<td><a href="/es-ES/docs/Web/HTML/Content_categories#flow_content">Flujo de contenido</a>, contenido textual o estático, contenido incrustado</td>
</tr>
<tr>
<th scope="row">Contenido permitido</th>
<td>Cero o más elementos {{HTMLElement("source")}}, seguidos por un elemento {{HTMLElement("img")}}, mezclados opcionalmente con elementos script-supporting.</td>
</tr>
<tr>
<th scope="row">Omisión de etiquetas</th>
<td>{{no_tag_omission}}</td>
</tr>
<tr>
<th scope="row">Padres permitidos</th>
<td>Cualquier elemento que permita embeber contenido.</td>
</tr>
<tr>
<th scope="row">ARIA roles permitidos</th>
<td>Ninguno.</td>
</tr>
<tr>
<th scope="row">DOM interface</th>
<td>{{domxref("HTMLPictureElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="Atributos">Atributos</h2>
<p>Este elemento sólo incluye <a href="/en-US/docs/Web/HTML/Global_attributes">atributos globales.</a></p>
<h2 id="Notas_de_uso">Notas de uso</h2>
<p>Se puede usar la propiedad {{cssxref("object-position")}} para ajustar la posición de la imagen dentro del marco del elemento, y la propiedad {{cssxref("object-fit")}} para controlar como el tamaño de la imagen se ajusta para adaptarse al marco.</p>
<h2 id="Ejemplos">Ejemplos</h2>
<p>Estos ejemplos demuestran los efectos que tienen diferentes atributos del atributo {{HTMLElement("source")}} en la selección de la imagen a desplegar cuando se usa dentro de <code><picture></code>.</p>
<h3 id="El_atributo_media">El atributo <code>media</code></h3>
<p>El atributo <code>media</code> permite especificar una media query que el agente de usuario evaluará para seleccionar un elemento {{HTMLElement("source")}}. Si la media query evalua a <code>false</code>, el elemento {{HTMLElement("source")}} es omitido.</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>
<h3 id="El_atributo_type">El atributo <code>type</code></h3>
<p>El atributo <code>type</code> permite especificar un tipo MIME para los recursos dados en el atributo srcset del elemento {{HTMLElement("source")}}. Si el agente de usuario no soporta dicho tipo, el elemento {{HTMLElement("source")}} es omitido.</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="Especificaciones">Especificaciones</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="Compatibilidad_de_navegadores">Compatibilidad de 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>Soporte básico</td>
<td>38</td>
<td>13</td>
<td>{{CompatGeckoDesktop("38")}}</td>
<td>{{CompatNo}}</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>Soporte básico</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="Ver_también">Ver también</h2>
<ul>
<li>Elemento {{HTMLElement("img")}}</li>
<li>Elemento {{HTMLElement("source")}}</li>
<li>Posicionando y redimensionando la imagen dentro de su marco: {{cssxref("object-position")}} y {{cssxref("object-fit")}}</li>
</ul>
|
