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 |
<figure>
<picture> <source …> <source …> <source …> <img..> </picture> <figcaption>…</figcaption> |
我在规范中没有找到关于它的参考资料。 :\\\\\\\\
注意：我知道目前没有浏览器实现这个元素，我只是用jQuery图片做一些实验
谢谢。
- 这只是一个提议。在 HTML5 工作组(无论它是哪一个)批准包含它之前，您不能期望在任何规范中找到它。或许在社区组的邮件列表或 HTML5 邮件列表中提出这个问题的更好地方。
- 这甚至行得通吗？从来不知道 <picture> 标签
- @FabrizioCalderan 谢谢，学到了一些新东西；)
- @FabrizioCalderan – 请考虑重新选择选择的答案，因为当前已弃用且不正确
Mat Marquis herea€”Ia€?m 是 picture 规范 (http://picture.responsiveimages.org) 的编辑之一。
简短的回答是a€?yes,a€?长答案是a€？绝对是a€？语义正确(figure 可以包含图像、图表、表格、代码片段等)，并且 100% 有效。
- 谢谢@wilto。我看到响应式图像社区组网站上有一个很好的例子，可以同时使用 <figure> 和 <picture>：picture.responsiveimages.org/#example-6 你应该去看看@fabrizio-calderan。
你不会找到它，因为它实际上还不是官方的，但我会假设答案是肯定的，那很好。
目前，您可以执行以下操作：
|
1
2 3 4 |
<figure>
<img src=”image.jpg” alt=”The Image”> <figcaption>A Caption</figcaption> </figure> |
和 <picture> 只是一种为响应式站点提供多个 src’d <img> 的方法，因此从技术上讲，如果它被批准，您的示例是有效的。
是的，您在 <figure> 标记中包含 <picture> 是正确的。我将在其中一门课程中通过 Google 的认可来证实这一点。
视频中显示了这一点
是的，我们可以。现在它是官方的，我们也可以将它们用作响应式图像。
标记指定自包含内容 Ex-Images。
元素的内容独立于主流程。如果我们删除它，它应该不会影响文档的流动。
元素添加标题。
|
1
2 3 |
<figure>
<figcaption>Caption</figcaption> </figure> |
<picture> 标签在指定图像资源方面提供了更大的灵活性。我们可以使用多张图像来填充最适合浏览器视口的图像 A/Q，而不是只有一张图像。
|
1
2 3 4 5 6 |
<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> |
<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 标记内是正确的。
来源：https://www.codenong.com/12899691/
