부모 폭을 이미지 오버라이드하고 브라우저 너비를 늘리는 방법은 무엇입니까?

Question

브라우저의 너비에 맞게 늘리고 부모 폭을 늘릴 특정 이미지를 삽입하고 싶습니다. 이미지도 반응 적이어야합니다. 나는 이것을하는 방법을 이해할 수 없다. 이것은 가능한가? 당신의 도움에 미리 감사드립니다!

html 코드 :

<div id="wrapper"> <img id="pic" src="http://static.stuff.co.nz/1357440924/872/8147872.jpg" /> <p>This is a test</p> </div>

CSS 코드 :

#wrapper { width: 300px; margin: 0 auto; } #pic { width: 100%; }

여기

Jsfiddle 링크 : http://jsfiddle.net/9Ttyh/

Answer 1

당신은 안정적으로 img를 제거하지 않고 당신이 원하는 것을 달성 할 수 포함 된 부모로부터.

귀하의 HTML은 다음과 같이 보일 것이다 :

<img id="pic" src="http://static.stuff.co.nz/1357440924/872/8147872.jpg" /> 
<div id="wrapper"> 
    <p>This is a test</p> 
</div> 

http://jsfiddle.net/cGLeY/

Answer 2

당신은이 설정을 수행 할 수 있습니다 min-width: 100%을 이미지에, 내가 바로 당신을 얻을 수 있기를 바랍니다. jsFiddle : http://jsfiddle.net/Usuz4/

#wrapper { 
    width: 300px; 
    margin: 0 auto; 
} 
img { 
    min-width: 100%; 
} 

당신은 min-width을 넣으면 당신은 적어도 제공 크기를 얻기 위해 요소를 강제하고, 당신은 100%를 넣어 경우 부모 폭의 100%을한다.