Fluid header background image

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