50

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

figure 元素表示一个内容单元，可以选择带有标题，它是自包含的，通常作为单个单元从文档的主要流程中引用，并且可以从文档的主要流程中移开而无需影响文档的意义。

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

用于显示可以来自多种来源的图像的图片元素（请参阅 srcset 属性）。用户代理显示哪个图像取决于获取源图像的​​算法。

由于这两个描述似乎并不矛盾（并且图片上的文档还处于草稿状态），所以我的问题是：是否可以（从技术上和语义上）以这种方式嵌套picture在figure元素中？

<figure>
   <picture>
      <source ...>
      <source ...>
      <source ...>
      <img..>
   </picture>

   <figcaption>...</figcaption>
</figure>

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

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

谢谢你。

4

5 回答 5

76

Mat Marquis 在这里——我是picture规范 ( http://picture.responsiveimages.org ) 的编辑之一。

简短的回答是“是的”，长的回答是“肯定的”。语义正确（figure可以包含图像、图表、表格、代码片段等），并且 100% 有效。

于 2014-05-29T19:26:49.230 回答
19

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

目前，您执行以下操作：

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

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

于 2012-10-15T16:37:26.750 回答
9

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

在此处输入图像描述

这显示在此视频中

https://youtu.be/StKZMBURZpk?t=29

于 2020-03-14T19:09:51.710 回答
4

是的，我们可以。现在它是官方的，我们也可以将它们用作响应式图像。

该<figure>标签指定自包含内容 Ex-Images。元素的内容<figure>独立于主流。如果我们删除它，它应该不会影响文档的流动。

该<figcaption>元素用于为<figure>元素添加标题。

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

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

<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>和<audio>元素一起使用。它将以类似的方式工作。

所以，这是完全有效的。

<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>
于 2021-06-28T15:16:41.033 回答
2

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

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

于 2021-02-14T21:52:45.173 回答