Html 以百分比表示的高度与以百分比表示的填充底部

最近我发现了一个响应性很强的网站，它可以在不同大小的屏幕上改变图像内容。当屏幕大小像台式计算机一样大时，div的内容类似（没有其他文本内容，只有一个使用背景图像填充图像的div）：

当屏幕尺寸变小时，css样式会发生如下变化：

#div {
    background-image: url('images/pc-content01.jpg');
    background-size: cover;
    height: 0;
    padding-bottom: 95.5%;
}

当屏幕大小与moblie设备一样小时，背景图像将切换到另一个图像

我的问题是，填充底部的百分比是如何计算的，为什么高度的百分比不起作用，而填充底部的百分比起作用？

---

（我理解为什么高度百分比不起作用）。

填充百分比指的是包含块的宽度。在这种情况下，用于在宽度改变时保持纵横比（图像纵横比）。这是响应性设计中经常使用的技巧。身高百分比的作用不同

该百分比是根据建筑物的高度计算的 生成的框的包含块

---

，因此不适用于该目的。

当使用填充物的百分比值时，它总是指元素的宽度。因此在这种情况下，

#div

的

填充底部将是其宽度的95.5%。设置
高度的百分比值时
会使用包含块的高度来计算百分比值
 身高百分比

高度使用百分比仅适用于将高度使用百分比指定给页面的
正文和html
，否则将不起作用

像这样-


html，正文{
身高：100%；
背景：黑色；
}
正文>div{
身高：50%；
背景：灰色；
}

你好

#div {
    background-image: url('images/pc-content01.jpg');
    background-size: cover;
    height: 0;
    padding-bottom: 95.5%;
}