流体页面中的标题背景图片存在问题。无论浏览器宽度或标题内容如何,我都希望能够看到整个图像。我可以让图像填充100%的宽度。但是,高度将始终调整大小以适合标题的文本内容(当然应该这样做)。我想要实现的是将标题调整为100%宽度并保留调整大小的图像的完整高度并保持其宽高比。
答案 0 :(得分:2)
如果你将图像保留在流程中并且几乎让它需要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;
}