image - 画像を親の幅に上書きしてブラウザの幅に拡大するにはどうすればよいですか？

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/

score 1 · Accepted Answer

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>

score 0 · Accepted Answer

あなたはそれを設定することができます：min-width: 100%画像に対して、私はあなたが正しいことを願っています. jsFiddle: http://jsfiddle.net/Usuz4/

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

配置した場合min-width、要素に少なくとも指定されたサイズを強制的に取得させ、配置した場合、親の幅100%を取る必要があります。100%

2 に答える 2