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

Question

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

图元素表示内容单元,可选地带有标题,是自包含的,通常从文档的主流中引用为单个单元,并且可以远离文档的主流而没有影响文件的含义.

最近,一个新的元素<picture>,提出了由响应图片社区组,它被定义在参考像这样

用于显示可能来自各种源的图像的图片元素(请参阅srcset属性).用户代理显示的图像取决于用于导出源图像的算法.

由于这两个描述似乎并不矛盾(并且图片上的文档还处于草案状态),我的问题是:在这种方式中,是否有可能(技术上和语义上)嵌套picture在figure元素中？

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

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

我在规格中没有找到关于它的参考文献.:\

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

谢谢.

Answer 1

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

简短的回答是"是的",长答案是"明确的".语义正确(figure可以包含图像,图表,表格,代码片段等),并且100%有效.

Answer 2

你不会发现它,因为它实际上还不是官方的,但我会假设答案是肯定的,那很好.

目前,你做的事情如下:

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

并且<picture>简单地说是一个<img>为响应式网站设置多个src的方法,所以从技术上来看似乎 - 如果它被批准 - 你的例子是有效的.

Answer 3

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

该<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>

Answer 4

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

这在此视频中显示

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