3

画像を div の 100% にするにはどうすればよいですか?

300x300 の画像があり、より大きな div のフル サイズにしたいと考えています。(この div のサイズは変更される可能性があるため、どこか 100% を指定する必要があります)

CSS または Javascript に解決策はありますか?

4

5 に答える 5

2

image タグにCSS スタイルwidth: 100%を割り当てるだけで、親コンテナーのスペース全体をカバーできます。

例またはjsFiddle :

<div style="width: 500px;">
  <img src="yourPic.png" style="width: 100%" />
</div>
于 2012-11-02T10:37:30.213 に答える
2

これを試して：

<img src="test.jpg" alt="test" id="bg" />

img#bg {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

css3 もこれをサポートしています。

 #testbg{
background: url(bgimage.jpg) no-repeat;
background-size: 100%;
}
于 2012-11-02T10:35:02.807 に答える
1

これを試してください：http://jsfiddle.net/XUZV5/

<div style="height:100px;width:300px;">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/Mars-Schiaparelli.jpg/280px-Mars-Schiaparelli.jpg" style="width:100%;height:100px;"/>
</div>​
于 2012-11-02T10:37:45.780 に答える
1

<div style="width:450px;height:450px;">
    <img src="photo.png" style="width:100%;height:100%;"/>
</div>

于 2012-11-02T10:35:56.597 に答える
1

以下の CSS は、画像を拡大縮小し、div の幅を 100% 埋めます。

#imgId {
    width: 100%;
    height: auto;
}

ただし、実際に画像を引き伸ばして div 全体を塗りつぶしたい場合は、

#imgId {
    width: 100%;
    height: 100%;
}

もう 1 つの便利なヒントは、幅がパーセンテージで指定され、画像が正方形である場合です。

HTML

<div class="container">
    <img src="sample.jpg">
    <div style="clear:both;"></div>
</div>

CSS

​.container {
    position: relative;
    width: 50%;
    height: 0;
    // % padding is calculated as % of width rather than height 
    // so height will equal 50%
    padding-bottom: 50%; 
}

img {
    position: relative;
    width: 100%;
    // image is square so as long as width is 100% then height will be the same.
    height: auto;
}
html, body {
    height: 100%;
    width: 100%;
}

上記は、画像が常に親 div に正確に収まるようにサイズ変更されることを意味します。

ここでフィドル

于 2012-11-02T10:36:48.070 に答える