Question

最近我发现了一个响应式网站，它改变了不同大小屏幕的图像内容。当屏幕尺寸像台式电脑一样大时，div的内容就像（没有其他文字内容，只是用背景图像填充图像的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%;
}

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

我的问题是，如何计算填充底部的百分比，为什么高度百分比不起作用但填充底部的百分比有效？（我明白为什么身高百分比不起作用）。

Answer 1

在填充百分比中，请参考包含块的宽度。在这种情况下，用于在宽度改变时保持纵横比（图像1）。这是响应式设计中经常使用的技巧。 A box with an intrinsic ratio。高度百分比的工作方式不同

百分比是根据高度来计算的生成的框包含块...

MDN，因此不适合此目的。

Answer 2

使用填充的百分比值时，它总是引用元素的 width 。 See MDN。因此，在这种情况下，padding-bottom的{{1}}将是其宽度的95.5％。设置#div的百分比值时，它会使用包含块的高度来计算它。 See MDN

Answer 3

百分比高度

高度使用百分比仅在我们使用百分比向页面的body and html提供高度时才有效，否则无效。

喜欢这个 -

＆＃13;

html, body{
  height:100%;
   background:black;
}

body>div{
 height:50%;
 background:gray;
}

＆＃13;

<body>
 <div>HI</div>
</body>

＆＃13;

填充底部百分比

但是在padding-bottom的百分比情况下，它与body or HTML无关。它只检查width of the containing element。

喜欢这个 -

＆＃13;

html, body{
   background:black;
}

div{
 background:gray;
 padding-bottom:20%;
}

＆＃13;

<body>
<div>HI</div>
</body>

＆＃13;