css - css 中的 % 值使图像消失

Question

我在缩放元素以提高响应能力时遇到了一些问题。

如果我使用的是 px 值，则缩放是正确的并且表现得像我想要的那样。但是因为我希望我的移动 css 与尽可能多的设备兼容，所以我更喜欢使用 % 值。问题是，一旦我将 px 值切换为 % 值，我的图像/内容要么消失，要么缩放到非常小的比例，同时改变 x 和 y 位置。

是否存在任何可能导致浏览器难以处理 % 值的已知问题？我环顾四周，但找不到任何描述我的问题的内容。

我的问题示例:

使用 px 值(正确工作):JSFiddle demo

.header{
    width: 30%;
    margin: auto;
    position: relative;
}

.logo{
    background-color: #FF0000;
    width: 100px;
    height: 100px;
    display: inline-block;
    margin: auto;
}

使用 % 值(图像消失):JSFiddle demo

.header{
    width: 30%;
    margin: auto;
    position: relative;
}

.logo{
    background-color: #FF0000;
    width: 100%;
    height: 100%;
    display: inline-block;
    margin: auto;
}

Answer 1

这个行为是绝对正确的。当您使用 % 时，它表示父容器总宽度的一部分。在您使用 % 的示例中，您说“占用整个可用区域”。但是父容器只设置了宽度。因此，它的宽度为 30%，但没有添加高度。如果您将 height: 200px; (例如)添加到您的 .header 您将看到它按预期工作 -> http://jsfiddle.net/krasimir/aMXkg/11/

.header{
  width: 30%;
  height: 200px;
  margin: auto;
  position: relative;
}

  .logo{
    background-color: #FF0000;
    width: 100%;
    height: 100%;
    display: block;
    margin: auto;
  }