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
|
---
title: '<picture>: The Picture element'
slug: Web/HTML/Element/picture
translation_of: Web/HTML/Element/picture
---
<div>{{HTMLRef}}</div>
<p><span class="seoSummary"><strong>HTML <code><picture></code> 元素</strong> 包含了零或零以上個 {{HTMLElement("source")}} 元素以及一個 {{HTMLElement("img")}} 元素，以為不同顯示器/裝置提供同張圖片的不同版本。</span> </p>
<p>瀏覽器將會考慮每個 <code><source></code> 元素，並且在其中選出最適當的選項。如果沒有找到最適當的選項——或是瀏覽器不支援 <code><picture></code> 元素——則 <code><img></code> 屬性的 URL 會被選擇。被選擇的圖片將會在 <code><img></code> 元素存在的位置顯示。</p>
<div>{{EmbedInteractiveExample("pages/tabbed/picture.html", "tabbed-standard")}}</div>
<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p>
<p>為了決定載入哪一個 URL，{{Glossary("user agent")}} 會檢視每一個 <code><source></code> 的 {{htmlattrxref("srcset", "source")}}、{{htmlattrxref("media", "source")}} 以及 {{htmlattrxref("type", "source")}} 屬性，以選出最適合當前版面以及顯示裝置支援度的圖片。</p>
<p><code><img></code> 有兩個作用：</p>
<ol>
<li>它描述了該圖片的尺寸等屬性以及呈現（presentation）。</li>
<li>在所有列出的 <code><source></code> 都不能提供可用圖片的情況下的 fallback。 </li>
</ol>
<p><code><picture></code> 的常見使用案例：</p>
<ul>
<li><strong>圖像方向（art direction）：</strong> 根據不同的 <code>media</code> 狀況裁切或調整圖片（例如在較小的螢幕上，載入原本有複雜細節圖片的較簡單版本圖片）</li>
<li><strong>提供替代的圖片格式：</strong>以應對某些特定格式不被支援的情況</li>
<li><strong>節省頻寬並加速頁面載入速度：</strong>透過針對觀看者的裝置載入最適當的圖片做到這點</li>
</ul>
<p>如果是要為高 DPI （Retina）螢幕提供圖片的高解析度版本時，可改在使用 <code><img></code> 上使用 {{htmlattrxref("srcset", "img")}} 屬性。這會讓瀏覽器在 data-saving 模式選擇低解析度的版本，這樣你就不用特地指定 <code>media</code> 條件。</p>
<table class="properties">
<tbody>
<tr>
<th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th>
<td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, phrasing content, embedded content</td>
</tr>
<tr>
<th scope="row">Permitted content</th>
<td>Zero or more {{HTMLElement("source")}} elements, followed by one {{HTMLElement("img")}} element, optionally intermixed with script-supporting elements.</td>
</tr>
<tr>
<th scope="row">Tag omission</th>
<td>{{no_tag_omission}}</td>
</tr>
<tr>
<th scope="row">Permitted parents</th>
<td>Any element that allows embedded content.</td>
</tr>
<tr>
<th scope="row">Implicit ARIA role</th>
<td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">No corresponding role</a></td>
</tr>
<tr>
<th scope="row">Permitted ARIA roles</th>
<td>No <code>role</code> permitted</td>
</tr>
<tr>
<th scope="row">DOM interface</th>
<td>{{domxref("HTMLPictureElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="屬性">屬性</h2>
<p>此元素只包含 <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p>
<h2 id="用法筆記">用法筆記</h2>
<p>你可以使用 {{cssxref("object-position")}} 屬性來在元素的 frame 內調整圖片位置，也可以用 {{cssxref("object-fit")}} 屬性控制圖片在 frame 內如何調整大小。</p>
<div class="note">
<p><strong>注意:</strong> 在子元素 <code><img></code> 上使用這些屬性，而不是 <code><picture></code> 元素.</p>
</div>
<h2 id="範例">範例</h2>
<p>以下例子示範如何根據 {{HTMLElement("source")}} 元素不同的屬性設定選擇 <code><picture></code> 中的不同圖片。</p>
<h3 id="media_屬性">media 屬性</h3>
<p><code>media</code> 屬性指定特定的媒體類型（跟 media query 很像），讓 user agent 可對每個 {{HTMLElement("source")}} 元素作出判斷。</p>
<p>如果 {{HTMLElement("source")}} 的指定媒體類型被判斷為 <code>false</code> ，則瀏覽器會跳過它，並繼續判斷 <code><picture></code> 中的下個元素。</p>
<pre class="brush: html notranslate"><picture>
<source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
<img src="mdn-logo-narrow.png" alt="MDN">
</picture>
</pre>
<h3 id="srcset_屬性">srcset 屬性</h3>
<p>The <a href="/en-US/docs/Web/HTML/Element/source#attr-srcset">{{htmlattrdef("srcset")}}</a> 屬性用來提供根據大小區分的可能圖片清單。</p>
<p>它是由逗號分隔的圖片描述句清單組成的。每一個圖片描述句是由該圖片的 URL 以及以下描述組成（擇一）：</p>
<ul>
<li>寬度，結尾為 <code>w</code> (例如 <code>300w</code>)；<br>
<em>或是</em></li>
<li>像素密度，結尾為 <code>x</code> (例如 <code>2x</code>)，以為高 DPI 螢幕提供高解析度圖片</li>
</ul>
<pre class="brush: html notranslate"><picture>
<source srcset="logo-768.png 768w, logo-768-1.5x.png 1.5x">
<source srcset="logo-480.png, logo-480-2x.png 2x">
<img src="logo-320.png" alt="logo">
</picture></pre>
<h3 id="type_屬性">type 屬性</h3>
<p><code>type</code> 屬性為 {{HTMLElement("source")}} 元素中 <code>srcset</code> 屬性的資源 URL 指定 <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME type</a> 。如果 user agent 不支援該 type 的話，此 {{HTMLElement("source")}} 元素會被略過。</p>
<pre class="brush: html notranslate"><picture>
<source srcset="logo.webp" type="image/webp">
<img src="logo.png" alt="logo">
</picture>
</pre>
<h2 id="規格">規格</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="瀏覽器支援度">瀏覽器支援度</h2>
<p>{{Compat("html.elements.picture")}}</p>
<h2 id="相關資源">相關資源</h2>
<ul>
<li>{{HTMLElement("img")}} 元素</li>
<li>{{HTMLElement("source")}} 元素</li>
<li>在圖片的 frame 中調整其大小與位置： {{cssxref("object-position")}} and {{cssxref("object-fit")}}</li>
<li><a href="/en-US/docs/Web/Media/Formats/Image_types">圖片檔案類型與格式指南</a></li>
</ul>
|
