3

如何使图像 100% 为 div ？

我有一个 300x300 的图像，我想让它成为一个更大的 div 的全尺寸。（这个 div 的大小可以改变，所以我必须指定它的 100%）

CSS 或 Javascript 有解决方案吗？

4

5 回答 5

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 回答
2

只需在图像标签中指定 CSS 样式width: 100%，使其覆盖其父容器的整个空间。

示例或jsFiddle：

<div style="width: 500px;">
  <img src="yourPic.png" style="width: 100%" />
</div>
于 2012-11-02T10:37:30.213 回答
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 将缩放您的图像并填充 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。

在这里提琴

于 2012-11-02T10:36:48.070 回答
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 回答