使用 CSS 最大高度调整较大图像的大小会在 IE11 中显示锯齿图像

Question

我正在使用以下 CSS 调整较大图像的大小：

img { 
  max-height: 100px;
}

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

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

最好的选择是什么？

Answer 1

看起来最好的选择是使用

-ms-interpolation-mode: bicubic;

帮助您使用 IE <9，但之后就是图像的呈现方式。从 IE9 开始，他们不再使用此命令，但问题仍然存在。

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

您可以尝试 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>

使用 CSS 最大高度调整较大图像的大小会在 IE11 中显示锯齿图像

Resizing a larger image using CSS max-height displays an aliased image in IE11

css

responsive-design