我正在尝试通过按照 Google Page Speed官方指南修改我的图像来改进我网站上的 CLS 。我有一个固有大小为 500 x 281 像素的 JPG 图像，因此我添加了以下 HTML 作为测试：
<img src="..." width="1280" height="720">
问题在于图像的实际纵横比现在取决于视口和容器——这意味着纵横比变得不正确。我的期望是，以上将确保图像的宽度为容器的 100% 并解决 CLS 问题，同时保持正确的纵横比。
我还尝试了以下替代方法（在此示例中使用内联样式）：
<img src="..." style="width:100%;height:auto;aspect-ratio:1280/720;">
这似乎具有实现预期结果并从 Google Page Speed 中删除 CLS 请求以在图像上添加显式高度/宽度的效果。但是，由于某种原因，CLS 在使用这个与不使用任何样式时变得更糟，我不明白。