在 HTML5 的 <figure> 元素中使用 <picture>？

Posted 2023-03-05

【中文标题】在 HTML5 的 <figure> 元素中使用 <picture>？

【英文标题】：Use of <picture> inside <figure> element in HTML5?

【发布时间】：2012-10-05 16:00:32

【问题描述】：

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

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

最近Responsive Images Community group提出了一个新元素<picture>，它被定义为in the reference这样

用于显示来自一系列来源的图像的图片元素（参见 srcset 属性）。用户代理显示哪个图像取决于获取源图像的​​算法。

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

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

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

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

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

谢谢。

【问题讨论】：

这只是一个建议。在 HTML5 工作组（无论它是哪一个）批准包含它之前，您不能期望在任何规范中找到它。或许在社区组的邮件列表或 HTML5 邮件列表中询问这个问题的更好地方。

这还能用吗？从来不知道<picture>标签

@FabrizioCalderan 谢谢，学到了新东西 ;)

@FabrizioCalderan - 请考虑重新选择所选答案，因为当前已弃用且不正确

【参考方案1】：

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

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

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

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

【参考方案2】：

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

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

【讨论】：

谢谢@wilto。我看到响应式图像社区组网站上有一个很好的例子，将<figure> 和<picture> 一起使用：picture.responsiveimages.org/#example-6 你应该看看@fabrizio-calderan。

【参考方案3】：

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

视频中显示了这一点

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

【参考方案4】：

图是block-level element。 图片是inline-level element。

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

【参考方案5】：

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

<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"  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"  class="abc">
   </picture>
   <figcaption>Caption</figcaption>
</figure>