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;
  }