时间戳

首页 > 解决方案 > 我是否需要为图片元素中的每个源重复类属性？(HTML5)

html - 我是否需要为图片元素中的每个源重复类属性？(HTML5)

问题描述

我正在将我们的图像转换为 webp，这意味着我需要使用“图片”标签而不是“img”，因为图片允许不支持 webp 的设备和浏览器回退到 png 格式。

无论如何，我有一个看起来像这样的img：

<img class="usp-pics pic1" src="/images/example.png" alt="" title="">

因此，将其转换为能够回退到 png 的 webp 将如下所示：

<picture>
    <source srcset="/images/example.webp" type="image/webp">
    <source srcset="/images/example.png" type="image/png">
    <img class="usp-pics pic1" src="/images/example.png" alt="" title="">
</picture>

如果浏览器读取上述代码并获取第一个 webp 图像，它是否还会应用附加到 img 元素的类、alt 和标题标签，或者我是否需要为每个源重复它们，或者将它们添加到父图片标签？

我试图查找此内容，但找不到答案。可能是因为它很明显，也可能是因为我用了错误的词来描述这个问题。对不起，如果这已经在某处被覆盖。

标签： htmlimage

解决方案

根据 MDN，<picture>元素只需获取 的内容<source>并将其放在<img>标签定义的空间内：

浏览器将考虑每个子<source>元素并从中选择最佳匹配。如果没有找到匹配项——或者浏览器不支持该元素——则选择该元素的 src 属性<picture>的 URL 。然后在元素占用的空间中呈现所选图像。<img><img>

（我的重点）

因此，我希望<img>标签上的类仍然会出现在最终用户面前，无论使用哪种（或任何）<source>材料。

我的测试：

但我没有检查这个。所以我决定对图像类型（PNG / JPG / Webp）和<picture>元素进行一些测试：

.one {
  border: 3px solid #f00;
}
.two {
  border: 3px solid #0f0;
}
.thr {
  border: 3px solid #00f;
}
.fou {
  /* Picture Element */
  border: 3px solid #333;
  display: inline-block;
}
<picture class='fou'>
    <source srcset="https://www.gstatic.com/webp/gallery/3.webp" type="image/webp" class='thr'>
    <source srcset="https://developers.google.com/web/fundamentals/design-and-ux/responsive/img/art-direction.png" type="image/png" class='two'>
    <img src="https://images.pexels.com/photos/163016/crash-test-collision-60-km-h-distraction-163016.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="" title="" class='one'>
</picture>

从上面的例子，以及编辑它和玩它

  • 重新整理<source>材料。

不难发现：

  • <source>元素不隐藏在页面上，但不包含图形内容。

  • 无论<source>使用什么，<img>元素始终是包含图片图形的元素（有时称为图像（WTF？））。

  • <picture>容器对象始终存在，但在 HTML5 中是一个容器<figure>。它不应该被赋予用于内容的 CSS 样式，例如<img>.

结论：

上面的代码（及其修改和编辑）显示所有元素都存在于 HTML 中，但唯一的图像是<img>元素。

因此，您不应该对元素应用任何样式或 CSS，<source>而只应将容器样式应用于<picture>元素。

您问：

我是否需要为图片元素中的每个源重复类属性？

答案：

答案是否定的。您应该只<img>为元素设置样式。

例子：

<picture>
    <source srcset="/images/example.webp" type="image/webp">
    <source srcset="/images/example.png" type="image/png">
    <img class="usp-pics pic1" src="/images/example.png" alt="something" title="">
</picture>

推荐阅读