如何让图片占据整个 div ?
我有一张 300x300 的图片,我想让它成为一个更大的 div 的全尺寸。(这个 div 的大小可能会改变,所以我必须在某个地方指定它的 100%)
在 CSS 或 Javascript 中有解决方案吗?
如何让图片占据整个 div ?
我有一张 300x300 的图片,我想让它成为一个更大的 div 的全尺寸。(这个 div 的大小可能会改变,所以我必须在某个地方指定它的 100%)
在 CSS 或 Javascript 中有解决方案吗?
试试这个:
<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%;
}
只需在图像标签中分配CSS样式width: 100%
,即可使其覆盖其父容器的整个空间。
示例或jsFiddle:
<div style="width: 500px;">
<img src="yourPic.png" style="width: 100%" />
</div>
#imgId {
width: 100%;
height: auto;
}
但是如果您想要通过拉伸图像来填充整个 div,请使用
#imgId {
width: 100%;
height: 100%;
}
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 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>