html - 改进 CLS 并拥有响应式图像

Question

我一直在努力改进网站上的 CLS。

所以我尝试添加一个父容器，以便图像将调整为该容器的大小。见下文：

    .cls-parent {
  width: 100%;
}

.cls-container {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
  padding: 26.04% 0 0 0; /* 26.04% / (96 / 25) = 100 / (1900 / 500) */
}

.cls-container img {
  display: block;
  max-width:100%;
  max-height:100%;
  width: auto;
  height: auto;
}

和 HTML：

<div class="cls-parent">
<div class="cls-container">
<img width="1900px" height="631" src="/wp-content/uploads/2020/11/Header_BlackFriday_v2_ENG.jpg">
</div>
</div>

但它不起作用，我不确定我做错了什么。

标签： htmlcssclscore-web-vitals