不同维度的动态背景图像

Question

我有一个100pxx100px的div，并想在其中动态加载背景图像。 这些图像具有各种不同的尺寸，我希望它们适合div而不会被扭曲。

看来background-size：包含;效果很好，但只有现代浏览器支持（通常IE是真正的bug ...）

有人可以推荐一个解决方案，因为我没有想法吗？ 安妮帮助表示赞赏。

Answer 1

我建议您不要将100x100 div用作背景图片容器。您应该在img中添加100x100 div标记或其他div作为图像容器。

然后，编写一个简单的算法来找出图像的方向以及如何最好地将图像容器放入100x100 div并将图像容器的height和width设置为比例。然后在100x100 div内垂直和水平居中。

我在jsfiddle中汇集了一个例子。

Tall Image and Wide Image Scaled using JS

Answer 2

典型的IE。您可以使用过滤器执行此操作：

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

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