html - 流体头背景图像

Question

我对流畅页面中的页眉背景图片有疑问。无论浏览器宽度或标题内容如何，​​我都希望能够看到整个图像。我可以让图像填充 100% 的宽度。然而，高度将始终调整大小以适应标题的文本内容(当然它应该这样做)。我想要实现的是将页眉调整为 100% 宽度并保留调整后图像的完整高度并保留其纵横比。

Answer 1

如果您将图像保持在流程中并实际上让它需要 0% 宽度，您可能会得到您想要的东西: http://codepen.io/gc-nomade/pen/qunsm

header {
  white-space:nowrap;/* make sure content keeps aside image */
}
header img {
  width:100%;
  margin-right:-100%;/* it will pull at left whats stands on right */
}
header div {
  position:relative;/* bring it up  front */
  z-index:1;/* make sure it's on top */
  display:inline-block;
  vertical-align:top;
  width:100%;
  white-space:normal;
}