我尝试了宽高比和 padding-top 技巧，但有没有办法自动化所有这些？
问问题
36 次
1 回答
0
我假设您不控制文档（设置显式高度/宽度）、资源（使用渐进式 jpg 加快处理速度）或服务器（使用 http2 推送或添加显式 http 标头）并且您想做这严格使用 css。
除非我遗漏了什么，否则无法精确完成。
您可以做的是通过在图像包装元素上设置 a 来降低 CLS的幅度，以尽可能减少可能的结果。min-height这样，CLS 将仅针对差异，而不针对整个高度。
可以这样做：
A - 简单 - 如果您知道没有图片的高度会小于这么多像素*，而不是 ser，那么您将在包装器上设置一个等于该像素数的最小高度。
*（实际显示的像素，不是原始文件的像素，数字可能匹配或不取决于您的实现）
B - 稍微复杂 - 如果您知道没有图片的纵横比会小于某个值，您可以在 中设置一个最小高度vw，其中精确值是每个媒体查询的特定计算的结果**。
**（例如，2/1 或更大的图像 - 例如 1000x500 像素 -min-height="50vw"如果它位于全宽列上，则将安全地放在包装器中；min-height="25vw"如果位于半宽列上，则位于包装器中，依此类推）
于 2022-01-20T11:57:23.200 回答