我正在观看本教程(~12:00(，其中开发人员正在解释如何解决慢速互联网连接上的图像加载问题。
他们修复它的方法是使用低分辨率图像，在找到全分辨率图像之前，它就像一个占位符。他们制作了一个CSS类，在其中定义了图像宽度&身高
我理解他们为什么设置width: 100%，但对于图像高度，他们使用padding-bottom: 150%(他们使用图像纵横比进行计算(。在视频中，他们没有一个合乎逻辑的解释，所以如果有人知道为什么这是有效的，请解释一下。谢谢。
这被称为填充底部破解，在加载图像和视频时：浏览器通常不会设置元素的高度，因为它需要首先加载内容才能分配正确的高度。
然而，如果你事先知道元素的纵横比，你可以很容易地计算和应用padding-bottom:
Padding Bottom = (Image Height / Image Width) * 100%
例如，16:9图片会给我们(9 / 16) * 100% = 56.25%，因此：将padding-bottom: 56.25%;规则应用于图像的容器将分配正确的垂直空间，以防止在加载图像时内容回流。
《粉碎杂志》发表了对这次黑客攻击的彻底解释。