如何調整div的背景圖片？

我無法調整div的背景圖像，因此無論div和img的大小如何都由圖像填充。如果圖像較小，則應該拉伸，反之亦然。無論變形和質量損失如何，整個圖像都應該可見。如何調整div的背景圖片？

我嘗試了所有這些組合和排列，還有更多。簡單 - 不起作用。

background-repeat: no-repeat; 
background-position: top center; 
background-size: auto; 
background-size: cover; 
background-size: contain; 
background-size: 100% 100%;

我使用Firefox 22，CSS是有效的CSS3，根據W3C驗證。

來源

2013-07-19 bonaca

這是CSS3只有

background-size: 100% 100%;

UPD：對於老IE，你可以使用過濾器：

-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='imgpath', sizingMethod='scale')"; /* IE8 */ 
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='imgpath', sizingMethod='scale'); /* pre IE8 */

來源

2013-07-19 08:46:59 YD1m

YD1m，我treid - 不起作用。其實，怎麼知道是我的css - css3還是不行？舊的IE - 並不重要。 – bonaca

你可以檢查'background-size'選項的支持[這裏]（http://caniuse.com/#feat=background-img-opts） – YD1m

YD1m，我剛剛在W3C驗證過muss - 沒關係 - 它是有效的CSS3。另外我使用Firefox 22 - 應該沒問題。 – bonaca

嘗試設置相同的高度和寬度的圖像，你已經給了div。

var currentHeight = $('.element_class').height(); 
var currentWidth = $('.element_class').width(); 
$('.yourimage').height()=currentHeight; 
$('.yourimage').height()=currentWidth;

來源

2013-07-19 08:46:16

阿倫，在這種情況下它的工作原理，但在div動態改變它的大小。這就是我想要調整其背景的原因。 – bonaca

獲取動態div var currentHeight = $（'。element_class'）。height（）; //獲取div內圖像的寬度 var currentWidth = $（'。div_class img'）。width（）;從jquery並將這些值設置回img標籤...得到了？如果不是，我會更新我的代碼 –

Arun，非常感謝，但 - 我必須使用jquery這個任務嗎？我相信CSS應該做到這一點。 – bonaca

如何調整div的背景圖片？

回答

相關問題