From 01b845e6d402777fe03cc4dd7ed5f21af400eed1 Mon Sep 17 00:00:00 2001 From: Jason Lee Date: Tue, 4 Jan 2022 17:38:26 +0800 Subject: Improve copywriting for add spaces between Chinese and English words for files/zh-cn/web/html/element. --- files/zh-cn/web/html/element/picture/index.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'files/zh-cn/web/html/element/picture/index.html') 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 ---
{{HTMLRef}}
-

HTML <picture> 元素通过包含零或多个 {{HTMLElement("source")}} 元素和一个 {{HTMLElement("img")}} 元素来为不同的显示/设备场景提供图像版本。浏览器会选择最匹配的子 <source> 元素,如果没有匹配的,就选择 <img> 元素的 {{htmlattrxref("src", "img")}} 属性中的URL。然后,所选图像呈现在<img>元素占据的空间中。

+

HTML <picture> 元素通过包含零或多个 {{HTMLElement("source")}} 元素和一个 {{HTMLElement("img")}} 元素来为不同的显示/设备场景提供图像版本。浏览器会选择最匹配的子 <source> 元素,如果没有匹配的,就选择 <img> 元素的 {{htmlattrxref("src", "img")}} 属性中的 URL。然后,所选图像呈现在<img>元素占据的空间中。

{{EmbedInteractiveExample("pages/tabbed/picture.html", "tabbed-standard")}}
-

要决定加载哪个URL,{{Glossary("user agent")}} 检查每个 <source> 的 {{htmlattrxref("srcset", "source")}}、{{htmlattrxref("media", "source")}} 和 {{htmlattrxref("type", "source")}} 属性,来选择最匹配页面当前布局、显示设备特征等的兼容图像。

+

要决定加载哪个 URL,{{Glossary("user agent")}} 检查每个 <source> 的 {{htmlattrxref("srcset", "source")}}、{{htmlattrxref("media", "source")}} 和 {{htmlattrxref("type", "source")}} 属性,来选择最匹配页面当前布局、显示设备特征等的兼容图像。

<picture> 的常见使用场景:

@@ -76,7 +76,7 @@ translation_of: Web/HTML/Element/picture

media 属性

-

media 属性允许你提供一个用于给用户代理作为选择 {{HTMLElement("source")}} 元素的依据的媒体条件(media condition)(类似于媒体查询)。如果这个媒体条件匹配结果为 false,那么这个 {{HTMLElement("source")}} 元素会被跳过。

+

media 属性允许你提供一个用于给用户代理作为选择 {{HTMLElement("source")}} 元素的依据的媒体条件 (media condition)(类似于媒体查询)。如果这个媒体条件匹配结果为 false,那么这个 {{HTMLElement("source")}} 元素会被跳过。

<picture>
   <source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
-- 
cgit v1.2.3-54-g00ecf