关于图片: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
<figure>
   <picture>
      <source …>
      <source …>
      <source …>
      <img..>
   </picture>

   <figcaption>…</figcaption>
</figure>

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

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

谢谢。


Mat Marquis herea€”Ia€?m 是 picture 规范 (http://picture.responsiveimages.org) 的编辑之一。

简短的回答是a€?yes,a€?长答案是a€?绝对是a€?语义正确(figure 可以包含图像、图表、表格、代码片段等),并且 100% 有效。


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

目前,您可以执行以下操作:

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


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

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

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

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 标记内是正确的。


原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/269139.html

(0)
上一篇 2022年6月20日
下一篇 2022年6月20日

相关推荐

发表回复

登录后才能评论