【发布时间】：2022-01-20 19:57:23
【问题描述】：
我尝试了宽高比和 padding-top 技巧，但有没有办法自动化所有这些？
【问题讨论】：
-
那么你知道纵横比吗？如果是，当您执行无法自动化的操作时发生了什么？
-
好吧，让我这样问：有没有办法在没有明确宽度、高度或纵横比的情况下修复 CLS？
标签： html sass lighthouse cumulative-layout-shift
【发布时间】：2022-01-20 19:57:23
【问题描述】：
我假设您不控制文档（设置明确的高度/宽度）、资源（通过渐进式 jpg 加快处理速度）或服务器（使用 http2 推送或添加明确的 http 标头）并且您想用 css 严格地做到这一点。
除非我遗漏了什么，否则无法精确完成。
您可以做的是通过在图像包装元素上设置min-height 来降低CLS 的幅度，以尽可能减少可能的结果。这样，CLS 将仅针对差异，而不针对整个高度。
可以这样做：
A - 简单 - 如果您知道没有图片的高度会小于 这么多 个像素*，而不是 ser，您会在包装上设置一个等于该像素数的最小高度.
*（实际显示的像素，不是原始文件的像素，数字可能匹配或不取决于您的实现）
B - 稍微复杂 - 如果您知道没有图片的纵横比会小于某个值，您可以在 vw 中设置一个最小高度，其中精确值是特定计算的结果**每个媒体查询。
**（例如，一个 2/1 或更大的图像 - 例如 1000x500px - 如果它位于全宽列上，则将安全地位于 min-height="50vw" 包装器中，如果位于半宽列上，则位于 min-height="25vw" 包装器中。宽度列等）
【讨论】：