图像 100% 的 div

Posted 2023-03-06

【中文标题】图像 100% 的 div

【英文标题】：Image 100% of a div

【发布时间】：2012-10-23 00:10:08

【问题描述】：

如何使图像 100% 为 div ？

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

有 CSS 或 javascript 的解决方案吗？

【问题讨论】：

或背景：url('link') center top no-repeat;这将适合 div。

我不想让它成为背景。但下面的答案是解决方案。还是谢谢你:)

【参考方案1】：

试试这个：

<img src="test.jpg"  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%;

【讨论】：

哇...我确定我已经尝试过了。嗯，它工作得很好。谢谢！

【参考方案2】：

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

【参考方案3】：

下面的 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。

小提琴here

【参考方案4】：

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

示例或jsFiddle:

<div style="width: 500px;">
  <img src="yourPic.png" style="width: 100%" />
</div>

【参考方案5】：

试试这个：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>​