使用 CSS max-height 调整较大图像的大小会在 IE11 中显示别名图像

【问题标题】：Resizing a larger image using CSS max-height displays an aliased image in IE11使用 CSS max-height 调整较大图像的大小会在 IE11 中显示别名图像
【发布时间】：2015-01-15 02:16:32
【问题描述】：

我正在使用以下 CSS 来调整更大的图像：

img { 
  max-height: 100px;
}

此图像在 Chrome 和 Firefox 中以适当的锯齿显示，但在 Internet Explorer 11 中边缘看起来非常锯齿（断断续续）。我尝试了 here 方法，但这在 IE11 中没有任何影响。

图片无法调整大小和重新上传，因为这是一个试图响应访问者的内容管理系统。我们也不能依赖服务器端脚本。

这里最好的选择是什么？

【问题讨论】：

标签： css responsive-design

【解决方案1】：

看起来最好的选择是使用

-ms-interpolation-mode: bicubic;

帮助您解决 IE

在大多数讨论中，争论的焦点是您不应该缩小较大的图像，这对性能不利。这是一个很好的论据，但不能解决您的问题。

您可以试用ReSrc.it 之类的内容。这可以让您超越当前 CMS 的限制。要使其正常工作（这是一项付费服务），您需要遵循类似的模式

<img data-src="http://www.your-site.co/image.jpg" class="resrc"/>
<script src="//use.resrc.it/0.9"></script>
<script>
  resrc.ready(function () {
    resrc.run();
  });
</script>

【讨论】：