流体标题背景图像

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