圖片100％的div

Question

我如何製作100％的div圖像？

我有一個300x300的圖像，我想使它成爲一個更大的div的全尺寸。 （這個div的大小可以改變，所以我不得不指定100％的地方）

在CSS或Javascript中有解決方案嗎？

Answer 1

試試這個：

<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%; 
} 

Answer 2

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

Answer 3

的CSS下面將規模你的形象，並填寫您的div的寬度的100％

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

但是，如果你真的想通過拉伸圖像使用

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

填充整個DIV

另一個有用的提示是，當你的寬度被指定爲百分比，而你的圖像是正方形時，就像你的那樣。上述

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%; 
} 

意味着圖像會一直調整到正確配合母公司股利。

小提琴here

Answer 4

剛分配的CSS樣式width: 100%在圖像標籤有它覆蓋其父容器的整個空間。

實施例或jsFiddle：

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

Answer 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>​