图像缩放会导致Firefox / Internet Explorer的质量下降，但不会导致镀铬

小编典典

图像缩放会导致Firefox / Internet Explorer的质量下降，但不会导致镀铬

html

在Chrome中，然后在Firefox或InternetExplorer中。图像原本为120像素，我正在缩小为28像素，但是无论您将其缩小为多少，它看起来都非常糟糕。

图像是PNG，并且具有Alpha通道（透明度）。

以下是相关代码：

HTML：

<a href="http://tinypic.com?ref=2z5jbtg" target="_blank">
    <img src="http://i44.tinypic.com/2z5jbtg.png" border="0" alt="Image and video hosting by TinyPic">
</a>

CSS：

a {
    width: 28px;
    height: 28px;
    display: block;
}

img {
    max-width: 100%;
    max-height: 100%;
    image-rendering: -moz-crisp-edges;
    -ms-interpolation-mode: bicubic;
}

CSS 的image-rendering和-ms-interpolation-mode行似乎没有任何作用，但是我在对该问题进行一些研究时在网上找到了它们。

阅读 317

2020-05-10

共1个答案

小编典典

看来你是对的。没有选项可以更好地缩放图像：

我已经测试了FF14，IE9，OP12和GC21。只有GC具有可通过停用的更好的缩放比例image-rendering: -webkit- optimize-contrast。所有其他浏览器的缩放比例均没有/差。

不同输出的屏幕快照：

更新

同时，更多浏览器支持平滑缩放：

ME38（Microsoft Edge）具有良好的缩放比例。不能禁用它，它适用于JPEG和PNG，但不适用于GIF。
FF51（关于自FF21起的@karthik的注释）具有良好的缩放比例，可以通过以下设置禁用它：
```
image-rendering: optimizeQuality
```
image-rendering: optimizeSpeed
image-rendering: -moz-crisp-edges

注意：关于MDN，该optimizeQuality设置是以下各项的同义词auto（但auto不会禁用平滑缩放）：

早期草案中存在的值optimizeQuality和optimizeSpeed（来自其SVG对应项）被定义为自动值的同义词。

OP43的行为类似于GC（自2013年起就基于Chromium，因此并不令人惊讶），并且该选项仍然禁用平滑缩放：
```
image-rendering: -webkit-optimize-contrast
```

IE9-IE11不支持。该-ms-interpolation-mode设置仅在IE6-IE8中有效，但在IE9中已删除。

PS平滑缩放默认情况下完成。这意味着不需要任何image-rendering选择！

2020-05-10