유체 헤더 배경 이미지

Question

유체 페이지의 헤더 배경 이미지에 문제가 있습니다. 브라우저의 너비 나 헤더의 내용에 관계없이 전체 이미지를보고 싶습니다. 너비의 100 %를 채울 이미지를 얻을 수 있습니다. 그러나 높이는 항상 헤더의 텍스트 내용에 맞게 크기가 조정됩니다 (물론 그렇게해야합니다). 달성하기 위해 노력하고있어 헤더를 100 % 너비로 크기 조정 및 크기 조정 된 이미지의 전체 높이를 유지하고 해당 가로 세로 비율을 유지하는 것입니다. 당신이 흐름에 이미지를 유지하고 실제로는 0 %의 폭을 필요로 얻을 경우

Answer 1

, 당신은 당신이 찾고있는 것을 얻을 수 있습니다 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; 
}