Question

我的网站上有一个900px宽的徽标标题图片，它适合放在一个容器中，可以缩小它以适应标题栏;原因是为了适应标题栏而创建的图像在高分辨率移动设备上看起来很糟糕。

我发现我的图像在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相关的修复程序，如this，但是，对于您的具体情况，我建议使用svg徽标（如果您不需要支持IE8），而不是png。您可以找到关于此here的详细信息。

双立方插值图像重采样

1 个答案: