我的网站上有一个徽标标头图像，宽度为900px，它适合一个容器，该容器将其缩小以适合标题栏；原因是创建适合标题栏的图像在高分辨率移动设备上看起来很糟糕。
我发现我的图像在Chrome中看起来绝对不错，但是在IE10中，我的图像看起来令人震惊。你自己看;www.cmvisual.com
我尝试了使用-ms-interpolation-mode：Bicubic Code试图纠正问题，但它似乎行不通（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>
我是否缺少一些东西，有人对如何解决这个问题有任何建议吗？我已经考虑过在不同设备上包含标签以显示图像的不同版本，但这似乎很耗时，而且廉价的解决方法？
非常感谢任何需要时间提供帮助的人。
我也遇到了IE10降采样的一些问题，正如您指出的那样，IE10中不再支持专有的CSS样式（此外，自IE9以来）。有一些类似JS的修复程序，但是对于您的具体情况，我建议使用SVG徽标（如果您不需要支持IE8），而不是PNG。您可以在此处找到有关此的好信息。