如何解决改进 CLS 并拥有响应式图像
我一直在努力改进网站上的 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>
但它不起作用,我不确定我做错了什么。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。