왜 이미지가 100 %가 아니며 브라우저에 어떻게 적용합니까?

Question

브라우저의 이미지 너비를 100 % 늘리려고하고 있지만 어딘가에 잘못 될 것 같습니다.

는 여기 Fiddle.

입니다 그리고 나는 끝 부분에 코드를 추가합니다.

나는 similar을 찾았지만 검사 할 때 그 코드를 이해할 수는 없습니다.

그리고 어떻게 이미지를 브라우저에 맞게 만들 수 있습니까?

Jquery를 사용하고 있습니까? 사전에

감사합니다.

코드 -

HTML :

<div id="header"> 
    <img src="http://davesizer.com/blogs/wp-content/uploads/2010/03/eva_jump.jpg" alt="Collin Hughes"> 
</div> 
    <div id="outer" > 
     <div id="inner"></div> 
</div> 
    </body> 

CSS :

body, html { 
    margin: 0; 
    width: 100%; 
    } 

#header{ 
    position: relative; 
    width: 100%; 
    height:auto; 
    background-size: 100%; 
    margin: 0; 
    } 

#outer{ 
    position: relative; 
    width: 90%; 
    height: 500px; 
    background-color: red; 
    margin-top:30px; 
    margin-right: auto; 
    margin-bottom: 30px; 
    margin-left: auto; 
    padding: 20px 0 0 0; 


} 

#inner{ 
    width: 200px; 
    height: 250px; 
    background-color: lightblue; 
    margin: 0 auto; 
    top: 20px; 
} 

Answer 1

당신은 이미지를 타겟팅 할 CSS에이를 추가해야합니다. 다른 사이트에서도이 작업을 수행하고 있습니다.

#header img { width:100% } 

Answer 2

이미지의 너비는 #header에서만 설정하고 있습니다.
당신은이 문제를 해결하려면 다음을 추가 할 수 있습니다 : 브라우저의 크기를 변경하는 경우도 폭을 보장

#header img{ 
    width: 100%; 
} 

100 %도 항상이다.
결과 상자의 크기를 조정하여 아래의 업데이트 된 피들에서 시도 할 수 있습니다.

는