html - 高度百分比与填充底部百分比

Question

最近我发现了一个响应式网站，可以在不同尺寸的屏幕上更改图像内容。当屏幕尺寸很大如台式电脑时，div 的内容是这样的(没有其他文本内容，只是一个使用 background-image 填充图像的 div):

#div {
    background-image: url('images/pc-content01.jpg');
    background: no-repeat center center;
    height: 1129px;
}

当屏幕尺寸变小时，css 样式变化如下:

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

当屏幕尺寸与移动设备一样小时，背景图像将交换为另一幅图像。

我的问题是，padding-bottom 的百分比是如何计算的，为什么高度百分比不起作用但 padding-bottom 百分比有效？(我明白为什么高度百分比不起作用)。

Answer 1

在填充百分比中，指的是包含 block 的宽度。在这种情况下，用于在宽度变化时保持纵横比(图像一)。这是响应式设计中经常使用的技巧。 A box with an intrinsic ratio .高度百分比的作用不同

The percentage is calculated with respect to the height of the generated box's containing block...

MDN , 所以不适合这个目的。