不同尺寸的動態背景圖片

Question

我有一個100pxx100px的div，並且想要在其中動態加載背景圖片。 這些圖像大小不一，我希望它們適合div而不會被扭曲。

看來，background-size：contains;運行良好，但只支持現代瀏覽器（像往常一樣IE是真正的竊聽者...）

有人可以請推薦一個解決方案，因爲我出來的想法？ 安妮幫助讚賞。

Answer 1

典型的IE。您可以使用過濾器做到這一點：

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='YOUR_IMAGE', sizingMethod='scale'); 

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='YOUR_IMAGE', 
sizingMethod='scale')"; 

Answer 2

我建議你不要使用100x100 div作爲背景圖像容器。您應該在100x100 div內添加一個img標記或另一個div以用作圖像容器。

然後，寫一個簡單的算法來找出圖像的方向，以及如何以最適合的圖像容器進入100x100 div並設置圖像容器的height和width規模。然後在100x100 div內垂直和水平居中。

我在jsfiddle中扔了一個例子。

Tall Image and Wide Image Scaled using JS