css - padding-bottom 是否相对于元素的宽度？

Question

Padding-bottom 必须相对于元素的宽度，但我在 Chrome 和 Firefox 的最新版本中进行了测试，并且 padding-bottom 是相对于父元素的宽度。

我需要一个相对于元素宽度的元素，但它不起作用：

width: 200px;
padding-bottom: 50%; /* must be 100px  */
height: 0;

参见示例：http ://dabblet.com/gist/6898263

我能做些什么？

Answer 1

不，在paddingproperties中，百分比是相对于包含块的宽度的，这里可能是body元素或div没有设置宽度的元素，因此它占据了可用宽度。

如果将元素包装在div容器中并在容器上设置所需的宽度，则可以按预期使用百分比。

Answer 2

width和padding属性之间没有联系。但是，他们都依赖第三件事。它是em单位（文档）。Emunit 可用于定义所有可测量的属性（如宽度、边框宽度等），它取决于字体大小（在这种情况下应该在 中定义px）。

你可以试试这个简单的技巧：

font-size: 200px;
width: 1em;
padding-bottom: 0.5em;

看我的小提琴：http: //jsfiddle.net/Wgzrn/。

在您的示例中，您使用了另一个div内部font-size定义了期望的字体，24px因此200px父级中的字体大小在这里不会成为问题。

我的解决方案不是很优雅，但我不知道其他任何解决方案。

Answer 3

为什么要将填充和背景颜色添加到包装的 div 中？如果我使用以下 css 更改您的 gist 上的 css，我有一个 100px 的填充。这里的代码：

div.aspect-ratio {
  width: 200px;
  height: 0;
  position: relative;
}

div.aspect-ratio > div {
  padding-bottom: 50%; /* must be 100px  */
  position: absolute;
  background: blue;
  color: white;
  font-size: 24px;
  text-align: center;
}