유체 배경 이미지

Question

유동적 인 크기 조정과 함께 인라인 바로 아래에서 메뉴 및 페이지 내용을 유지하면서 헤더에 'img'를 사용하여 유동적 배경 이미지를 사용할 수 있다면 해결하려고합니다.

CSS의는 다음과 같습니다

img#header-wrapper { 
    width: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
     z-index:10; 
} 

#content-wrapper {padding-top:266px;float:left;overflow: hidden;border-bottom: 0;position: relative;background-color:white;height: 100%;} 

HTML : 그것은 절대 위치와 필요 이상 당신이 부하가 더 복잡했습니다

<div id="header-wrapper" class="clearfix"> 
<img id="header-wrapper" src="/images/new-header.jpg" alt="" /> 
    </div> 
</div> 

Answer 1

. 필요한 것은 height: auto입니다.

LIVE DEMO >

<div class="header"> 
    <img src="http://www.dev.inside-guides.co.uk/images/new-header.jpg" /> 
</div> 
<div class="nav"> 
    NAV 
</div>​ 

.header { 
    width: 100%; 
    margin 0 0 10px 0; 
} 

.header img { 
    width: 100%; 
    height: auto; 
} 

.nav { 
    background: red; 
    width: 100%; 
}