双三次插值图像重采样

Question

我的网站上有一个900像素宽的徽标标题图片，该图片适合一个容器，该容器将其缩小以适合标题栏； 在高分辨率移动设备上，创建适合标题栏的图像的原因看起来很糟糕。

我发现我的图片在chrome中看起来绝对不错，但是在IE10中，它看起来令人震惊。 你自己看; www.cmvisual.com

我已经尝试使用-ms-interpolation-mode：bicubic代码尝试解决此问题，但是它似乎没有用（在ms网站上快速浏览一下是否已过时？）。

这是我的代码：

    <html>
    <head>
            <title>Chris MacDonald Visualisation</title>
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link href = "css/bootstrap.min.css" rel = "stylesheet">
            <link href = "css/styles.css" rel = "stylesheet">
            <style>
                img.highqual { -ms-interpolation-mode:bicubic; }
                img.nearestn { -ms-interpolation-mode:nearest-neighbour; }
            </style>
    </head>
    <body>

            <div class = "navbar navbar-inverse navbar-static-top" Role = "Navigation">
                <div class = "container">

                    <div class = "navbar-inside pull-left">
                        <a href = "index.html">
                                <img class = "logo1" src = "img/motif.png" class = "highqual">
                        </a>
                    </div>

我是否缺少任何东西，有人对如何解决这个问题有任何建议吗？ 我曾经考虑过包括在不同设备上显示图像的不同版本的标签，但这似乎很耗时，并且是一种廉价的解决方法？

在此先感谢所有花时间帮助您的人。

Answer 1

我也遇到了IE10图像下采样的问题，正如您所指出的那样，IE10中不再支持专有的CSS样式（此外，自IE9开始）。 有相关的修复像一些JS 这样 ，但对于特定的情况下，我会建议使用SVG标志（如果你不需要支持IE8），而不是PNG。 您可以在这里找到关于此的很好的信息。