html - 标签内的图像宽度和高度？

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>

如果我把它留给 宽度="100%"高度="100%"视觉上还可以，但 Google 搜索 PageSpeed Insights 报告不好 CLS .

如果我设置原始尺寸 宽度="1140"高度="380"除了 Chrome 之外的所有浏览器都在图像上设置了这些尺寸，视觉效果很差，但 CLS 没问题 !。

如果我离开 img src 没有宽度和高度 PageSpeed Insights 返回 图像元素没有明确的宽度和高度 和 坏 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)
}

这也是支持旧浏览器的一种冗余形式，您首先加载旧的和更常见的规则，最后加载最前沿的东西。
如果浏览器不理解规则，它就会丢弃它们。
哈。