用圖像填充整個div，而不管圖像大小不起作用

我試圖用圖像填充整個div，而不管圖像的大小如何，但由於某種原因，圖像只有它的默認大小。它不會自動拉伸以適應div的大小。我嘗試將圖像的寬度和高度設置爲100％，認爲它適合div，但圖像仍保持其默認大小。有沒有辦法自動伸展圖像來填充div，而無需手動測試和更改每個圖像？用圖像填充整個div，而不管圖像大小不起作用

<style> 

div { 
    border: 1px solid red; 
    width: 1000px; 
    height: 1000px; 
    background-image: url("side.jpg"); 
    background-repeat: no-repeat; 
} 

img { 
    width: 100%; 
    height: 100%; 
} 

</style> 

<div> </div>

來源

2015-07-09 frosty

你的代碼工作得很好：http://jsfiddle.net/zLchdsf2/（250x250px圖像填充整個1000x1000px格）由圖像設置爲div的背景圖像，並使用' – APAD1

你也可以做到這一點background-size：cover;'填入div：http://jsfiddle.net/zLchdsf2/2/ – APAD1

你是否期待你指定的背景圖像受100％寬度的影響？因爲這不是它的工作原理 - img {width：100％}規則將應用於img *元素*（如在@ APAD1的JSFiddle中）正如他所說的，可以使用'background-size'，但正確的值是' （'包含'將保留圖像的寬高比，這意味着如果你的圖像不是方形的，它不會填充1000x1000的div） –

從你的問題，目前還不清楚是否正在試圖用一個背景圖片或img元素來填充DIV。

如果您想要使用img元素填充div，則您發佈的代碼已經可以爲您做到這一點。你只需要放置在div內的img元素，如：

<div><img src="http://placehold.it/250x250" /></div>

如果你想拉伸圖像，用它作爲背景圖片，以填補格，你只需要值cover添加到background-size屬性：

background-size:cover;

JSFiddle for img element

JSFiddle for background image

來源

2015-07-09 21:31:20 APAD1

是的。封面是我正在尋找的。謝謝。 – frosty

高興地幫助，很高興你把它分類！ – APAD1

<img>標記是一個html元素，與該<div>的背景圖像無關。

由於APAD1正確指出，強制背景圖像填充html元素的正確方法是使用background-size。

background-size: contain填充元素，直到背景圖像觸及其容器的第一個邊緣（保持縱橫比）。
background-size: cover完全填充元素，同時保持圖像的高寬比。
background-size: 100% 100%完全填充元素，以便背景圖像在各個方面都接觸到元素的邊緣（因此可能會扭曲圖像）。

來源

2015-07-09 21:34:39 Jason

用圖像填充整個div，而不管圖像大小不起作用

回答

相關問題