適合背景圖像div的

201

我在下面的DIV的背景圖像，但圖像被切斷：適合背景圖像div的

<div style='text-align:center;background-image: url(/media/img_1_bg.jpg);background-repeat:no-repeat;width:450px;height:900px;' id="mainpage" align="center">

有沒有辦法來顯示背景圖片，而不切斷它關掉？

來源

2011-11-20 Rajeev

比股利圖像更大？ – grc

是的圖像比div大 – Rajeev

454

您可以通過background-size屬性（現在爲supported by most browsers）來實現此目的。

要縮放背景圖像以適合DIV中：

background-size: contain;

要縮放背景圖像覆蓋整個DIV：

background-size: cover;

JSFiddle example

還存在以下filter for IE 5.5+ support ，以及vendor prefixes for some older browsers。

來源

2011-11-20 08:14:32 grc

我覺得'background-repeat：round'有最好的效果。但不幸的是，只能在Chrome上運行（直到今天）。 – Sertage

工作很好！謝謝！ – khailcs

謝謝@Sertage。我不知道背景重複也有一個圓選項:) 謝謝隊友。 –

-5

它或者你改變你的div的寬度和高度或設置背景大小。

來源

2011-11-20 08:11:05 Teffi

您還可以使用此：

background-size:contain; 
height: 0; 
width: 100%; 
padding-top: 66,64%;

我不知道你的DIV值，但是讓我們假設你有那些。

height: auto; 
max-width: 600px;

再次，這些只是隨機數字。可能很難做出div的固定寬度的背景圖像（如果你想），所以最好使用max-width。實際上，使用背景圖像填充div並不複雜，只要確保以正確的方式對父元素進行樣式設置即可，因此圖像可以放置一個位置。

克里斯

來源

2015-03-24 15:58:18 Christian

如果你需要的是圖像在div的尺寸相同，我覺得這是最優雅的解決方案：

background-size: 100% 100%;

如果沒有，@grc答案是最撥款。

來源： http://www.w3schools.com/cssref/css3_pr_background-size.asp

來源

2015-08-14 14:25:52 Sertage

到底我在找什麼，謝謝:) –

最後我找到了適合整個div與背景的解決方案。謝謝！ –

爲我工作。謝謝:) –

適合背景圖像div的

回答

相關問題