diff options
Diffstat (limited to 'files/zh-cn/web/html/element/picture/index.html')
| -rw-r--r-- | files/zh-cn/web/html/element/picture/index.html | 8 |
1 files changed, 4 insertions, 4 deletions
diff --git a/files/zh-cn/web/html/element/picture/index.html b/files/zh-cn/web/html/element/picture/index.html index 9d531e7880..feba77aa93 100644 --- a/files/zh-cn/web/html/element/picture/index.html +++ b/files/zh-cn/web/html/element/picture/index.html @@ -12,18 +12,18 @@ translation_of: Web/HTML/Element/picture --- <div>{{HTMLRef}}</div> -<p><span class="seoSummary"><strong>HTML <code><picture></code> 元素</strong>通过包含零或多个 {{HTMLElement("source")}} 元素和一个 {{HTMLElement("img")}} 元素来为不同的显示/设备场景提供图像版本。浏览器会选择最匹配的子 <code><source></code> 元素，如果没有匹配的，就选择 <code><img></code> 元素的 {{htmlattrxref("src", "img")}} 属性中的URL。然后，所选图像呈现在<img>元素占据的空间中。</span></p> +<p><span class="seoSummary"><strong>HTML <code><picture></code> 元素</strong>通过包含零或多个 {{HTMLElement("source")}} 元素和一个 {{HTMLElement("img")}} 元素来为不同的显示/设备场景提供图像版本。浏览器会选择最匹配的子 <code><source></code> 元素，如果没有匹配的，就选择 <code><img></code> 元素的 {{htmlattrxref("src", "img")}} 属性中的 URL。然后，所选图像呈现在<img>元素占据的空间中。</span></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><span class="tlid-translation translation" lang="zh-CN"><span title="">要决定加载哪个URL</span></span>，{{Glossary("user agent")}} 检查每个 <code><source></code> 的 {{htmlattrxref("srcset", "source")}}、{{htmlattrxref("media", "source")}} 和 {{htmlattrxref("type", "source")}} 属性<span class="tlid-translation translation" lang="zh-CN"><span title="">，来选择最匹配页面当前布局、显示设备特征等的兼容图像。</span></span></p> +<p><span class="tlid-translation translation" lang="zh-CN"><span title="">要决定加载哪个 URL</span></span>，{{Glossary("user agent")}} 检查每个 <code><source></code> 的 {{htmlattrxref("srcset", "source")}}、{{htmlattrxref("media", "source")}} 和 {{htmlattrxref("type", "source")}} 属性<span class="tlid-translation translation" lang="zh-CN"><span title="">，来选择最匹配页面当前布局、显示设备特征等的兼容图像。</span></span></p> <p><code><picture></code> 的常见使用场景：</p> <ul> - <li><span class="tlid-translation translation" lang="zh-CN"><span title="">艺术指导(</span></span>Art direction<span class="tlid-translation translation" lang="zh-CN"><span title="">) —— 针对不同 <code>media</code> 条件裁剪或修改图像</span></span></li> + <li><span class="tlid-translation translation" lang="zh-CN"><span title="">艺术指导 (</span></span>Art direction<span class="tlid-translation translation" lang="zh-CN"><span title="">) —— 针对不同 <code>media</code> 条件裁剪或修改图像</span></span></li> <li>遇到所有浏览器都不支持的特定格式时，提供不同的图像格式</li> </ul> @@ -76,7 +76,7 @@ translation_of: Web/HTML/Element/picture <h3 id="media_属性"><code>media</code> 属性</h3> -<p><code>media</code> 属性允许你提供一个用于给用户代理作为选择 {{HTMLElement("source")}} 元素的依据的媒体条件(media condition)（类似于媒体查询）。如果这个媒体条件匹配结果为 <code>false</code>，那么这个 {{HTMLElement("source")}} 元素会被跳过。</p> +<p><code>media</code> 属性允许你提供一个用于给用户代理作为选择 {{HTMLElement("source")}} 元素的依据的媒体条件 (media condition)（类似于媒体查询）。如果这个媒体条件匹配结果为 <code>false</code>，那么这个 {{HTMLElement("source")}} 元素会被跳过。</p> <pre class="brush: html"><picture> <source srcset="mdn-logo-wide.png" media="(min-width: 600px)"> |