关于图片：HTML5 中 <figure> 元素中 <picture> 的使用？

Use of <picture> inside <figure> element in HTML5?

在 HTML5 中，我们目前有一个 <figure> 元素，定义如下(W3C 参考)

The figure element represents a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document, and that can be moved away from the main flow of the document without affecting the documenta€?s meaning.

最近响应图像社区组提出了一个新元素<picture>，它在参考文献中定义如下

The picture element used for displaying an image that can come from a range of sources (see srcset attribute). Which image the user agent displays depends on the algorithm for deriving the source image.

由于这两个描述似乎并不矛盾(并且图片上的文档还处于草稿状态)，所以我的问题是：是否有可能(技术上和语义上)在 figure 元素内有一个嵌套的 picture，在这样吗？

1
2
3
4
5
6
7
8
9
10

我在规范中没有找到关于它的参考资料。 :\\\\\\\\

注意：我知道目前没有浏览器实现这个元素，我只是用jQuery图片做一些实验

谢谢。

相关讨论

你不会找到它，因为它实际上还不是官方的，但我会假设答案是肯定的，那很好。

目前，您可以执行以下操作：

1
2
3
4

<figure>
<img src="image.jpg" alt="The Image">
<figcaption>A Caption</figcaption>
</figure>

和 <picture> 只是一种为响应式站点提供多个 src'd <img> 的方法，因此从技术上讲，如果它被批准，您的示例是有效的。

是的，您在 <figure> 标记中包含 <picture> 是正确的。我将在其中一门课程中通过 Google 的认可来证实这一点。

enter

1
2
3

<figure>
<figcaption>Caption</figcaption>
</figure>

<picture> 标签在指定图像资源方面提供了更大的灵活性。我们可以使用多张图像来填充最适合浏览器视口的图像 A/Q，而不是只有一张图像。

1
2
3
4
5
6

<picture> 也可以与 <video> 和元素一起使用。它将以类似的方式工作。

所以，这是完全有效的。

1
2
3
4
5
6
7
8
9

<figure>
<picture>
<source srcset="image-big.png" type="image/png" media="(min-width:1920px)">
<source srcset="image-med.png" type="image/png" media="(min-width:1200px)">
<source srcset="image-small.png" type="image/png" media="(min-width:700px)">
<img src="backup.png" alt="Test" class="abc">
</picture>
<figcaption>Caption</figcaption>
</figure>

Figure 是块级元素。
图片是一个内联元素。

块级元素可以包含内联级元素。
根据这个和以前的答案，将 picture 放在 figure 标记内是正确的。