Question

这是我的用例：

我有一个响应式设计的网页。页面垂直分成两半，在右侧我想显示一个图像（一个PDF页面呈现为PNG或JPG）。调整窗口大小后，图像的大小应该会改变。

我以为我已经解决了这个问题。我将服务器上的图像渲染到足够大的窗口大小（根据我们公司的设置）。 Chrome和Firefox缩小（并插入）图像就好了。

但是还有Internet Explorer 10：如果将图像大小缩小到100％以下的任何值，那么看起来就像一百万只苍蝇随机覆盖图像......我似乎无法找到解决方案。

我在ol＆＃39;天（IE7）曾经有一个名为-ms-interpolation-mode的CSS规则可以设置为bicubic。但这已被宣布为过时，并且在IE9 +

中不可用

我必须这样接受吗？如果在IE9 +中没有缩放图像的插值，那么如何将此设置称为过时？对此有什么解决方案吗？

我知道：通常，您不会让浏览器缩放图片。但是你有更好的解决方案吗？

编辑：我应该提到有问题的图像是白色背景上的黑色文字。在图像中使用细线字体时，效果更明显。

EDIT2：请在关闭此帖子之前重新检查小提琴（http://jsfiddle.net/7grxut1t/16/）。如果您在Chrome和IE中调整到非常小的尺寸，您将看到差异！

我的代码的相关部分

<div>
   <img src="http://websocket.bplaced.net/test.png"/>
</div>

CSS：

div {
   position: relative;
   width: 50%;
   height: 100%;
}

img {
   width: 100%;
}

Answer 1

好的，我发现了一个非常脏但又适用的解决方法

来自https://gist.github.com/fisch0920/37bac5e741eaec60e983的角度服务使用canvas元素即时插入图像。它在IE10中适用于我（虽然我不确定IE9）。

它的方法imageService.resizeStep在IE中速度惊人...它的渲染速度明显快于原生的Firefox图像插值渲染。

我不是很喜欢它，但它有效，而且它甚至不会减慢用户的工作流程。