html - 的后备图片

Question

是<PICTURE>正式在 HTML5 中？我在 w3schools.com 找不到它。

假设是官方的，就是回退的源属性<img>元素 src或 srcset .我看到一些网站使用 srcset它们不适用于任何版本的 IE，但是 src在 IE 中工作。

Answer 1

您可以查看浏览器支持的(非官方)概述 here .

<img> 必须包含元素，这具有提供后备选项的副作用。

图片元素必须有一个 <img>在其中标记，与 <source> 一起元素。这具有提供回退选项的副作用，但也是提供基本图像和元数据所必需的(特别是提供所需的 alt 属性)。 <source>元素只是覆盖 src <img> 的属性标记(在特定情况下)。

这是图片元素的示例，使用得当。这个例子来自 Mozilla Developer's Network .

<picture>
 <source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
 <img src="mdn-logo-narrow.png" alt="MDN">
</picture>

src应始终包含属性，即使您使用 srcset此外还有属性。

srcset属性是(据我所知)为不同分辨率定义源的“较旧”技术。它不使用标准语法媒体查询，也不具有使用 <picture> 提供的其他灵 active 。和 <source>元素 ( although Chris Coyier of CSS-tricks disagrees with me here )，但某些不支持较新标准的浏览器可能会支持。包括 srcset您的 <img> 上的属性标签可能是可取的，但在这些情况下，您仍然需要包含 src属性(当 srcset 文件都不合适时提供默认值，并为不支持 srcset 的浏览器提供后备)。所有图片标签始终需要 src和 alt属性——这些是 <img> 的必需属性标签。

<picture> 的有效示例标签，包括 srcset属性作为后备，src属性作为最坏情况的回退，如下所示。

<picture>
 <source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
 <img src="mdn-logo-narrow.png" srcset="mdn-logo.png 2x" alt="MDN">
</picture>

---

这Smashing Magazine article对不同的响应式图像技术以及何时使用每种技术进行了更深入的分析。

---

旁白:请不要相信 W3Schools 是官方来源。 W3Schools 选择了一个类似于 W3C(万维网联盟)的名称，但实际上它们与官方标准机构没有关系。来自他们的 about页面:“该站点的名称源自万维网 (W3)，但不隶属于 W3C。”