<picture> 标签内的图像宽度和高度？

Question

我在为块内的主要 img src 设置正确的宽度和高度时遇到问题。

<picture style="text-align: center; display: block;">
  <source srcset="https://www.ceramic-glazes.com/image/catalog/banners/ceramic-pigments.jpg" media="(min-width: 1200px)" width="1140" height="380">
  <source srcset="https://www.ceramic-glazes.com/image/catalog/banners/ceramic-pigments-600w.jpg" media="(min-width: 625px)" width="600" height="380">
  <source srcset="https://www.ceramic-glazes.com/image/catalog/banners/ceramic-pigments-320w.jpg" media="(max-width: 625px)" width="320" height="320">
  <img src="https://www.ceramic-glazes.com/image/catalog/banners/ceramic-pigments.jpg" alt="Ceramic pigments for Pottery for Ceramics Heraeus" width="100%" height="100%">
</picture>

如果我将其保留为 width="100%" height="100%" 视觉上没问题，但 Google 搜索 PageSpeed Insights 报告错误 CLS.
如果我设置原始尺寸 width="1140" height="380" 除了 Chrome 所有浏览器都在图像上设置这些尺寸并且视觉效果很差但是CLS 正常!.
如果我离开 img src 没有宽度和高度 PageSpeed Insights returns 图像元素没有明确的宽度和高度 错误的 CLS.

那么有什么胶水可以解决这个问题吗？基本上我想为不同的屏幕尺寸显示不同的图像，那么有没有其他方法可以做到这一点？

您可以在我们的网站上查看它的外观 -> ceramic glazes

任何产品，如 gold glaze for ceramics

Answer 1

非常简单，只需将您的属性尺寸规则重复说明，最终规则就是您真正想要的。

所以，像这样

.image {
width: 100px;  //gives good CLS/Lighthouse (initial)
width: 100%;   //gives the desired display result (final)
}

这也是支持旧浏览器的一种冗余形式，您首先加载旧的和更常见的规则，最后加载 bleeding-edge 内容。如果浏览器不理解这些规则，它就会丢弃它们。 HTH.

<picture> 标签内的图像宽度和高度？

Image width and height inside <picture> tag?

html

css

seo

responsive

pagespeed