我正在观看this教程（〜12：00），其中开发人员正在解释如何解决互联网连接速度慢时的图片加载问题。
他们修复它的方法是使用低分辨率图像，该图像将像占位符，直到找到全分辨率图像为止。他们制作了一个CSS类，在其中定义了图像的宽度和高度。
我理解了为什么他们设置了width: 100%，但是对于图像高度，他们使用了padding-bottom: 150%（他们在计算中使用了图像宽高比）。
在视频中，他们没有逻辑上的解释，所以如果有人知道答案的原因，请解释一下。谢谢。
答案 0 :(得分：3)
这称为 padding-bottom hack ，它在加载图像和视频时：您的浏览器通常不会为元素设置高度，因为它首先需要加载内容才能分配正确的高度。
但是，如果您事先知道元素的长宽比，则可以轻松计算并应用padding-bottom：
Padding Bottom = (Image Height / Image Width) * 100%
例如，16:9图片将给我们(9 / 16) * 100% = 56.25%，因此：对图像的容器应用padding-bottom: 56.25%;规则将分配正确的垂直空间，从而防止在加载图像时内容回流
Smashing Magazine发布了a thorough explanation这种黑客攻击。