借助于
padding-top: calc(height/widht * 100%);
我可以处理延迟加载图像以避免内容跳转。
但只有当所有图像都处于同一维度时，此解决方案才能完美运行。
渲染不同维度图片时如何处理内容跳转？
仅供引用:对于延迟加载图像，我正在使用 lazysizes
.wrapper {
position: relative;
height: 0;
padding-top: calc(100 / 411 * 100%);
}
.wrapper_img {
position: absolute;
top: 0;
left: 0;
max-width: 100%;
height: auto;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div>
<p>Test 001</p>
<div>
<div class="wrapper">
<img class="wrapper_img" src="https://placehold.it/411x100" />
</div>
</div>
Test 002
<div>
<div class="wrapper">
<img class="wrapper_img" src="https://placehold.it/150x100" />
</div>
</div>
Test 003
<div>
<div class="wrapper">
<img class="wrapper_img" src="https://placehold.it/411x600" />
</div>
</div>
Test 004
</div>
</body>
</html>Here是 JSBin 的链接。
最佳答案
@sravis 你在处理一组有限的纵横比吗？如果是这样，那么您可以为每个宽高比使用不同的类。如果不是，则预先设置 img、height 和 width 可以防止内容回流。
关于html - 处理延迟加载不同尺寸图像的宽高比以避免内容跳转，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57457984/