Question

我在我的网站上显示了一个.jpg图像。图片看起来很好的Firefox，Chrome但在IE中看起来像Pixelated。我正在使用IE9。

我的代码：

<img src="../TestApp/images/Pic.jpg" border="0" Style="width:770px;height:auto;margin:0px;padding:0px; -ms-interpolation-mode: bicubic;"  />

我试过-ms-interpolation-mode：bicubic;那不起作用因为它已经过时了

我试过-ms-interpolation-mode：nearest-neighbor;

我试过

<div class="column">
<img src="../TestApp/images/Pic.jpg" border="0" Style="width:770px;height:auto;margin:0px;padding:0px; -ms-interpolation-mode: bicubic;" class="Plate"/>  
</div>  


.column {
float:left;
display:inline; /* prevent IE margin doubling */
width:360px;
padding-top:1em;
margin-right:60px;
text-align:left;
}

.plate {
display:block;
margin:0 auto 0.5em;
}

那没用。我该如何解决这个问题？

Answer 1

我可以通过删除宽度来修复它：770px; height：auto;从图像和尺寸调整到Photoshop中的770px并上传到图像文件夹。

Answer 2

Internet Explorer不使用计算量更大的算法（例如Lanczos，Bi-Cubic等）来扩展其他浏览器供应商使用的图像。

我建议在浏览器中检测IE，并使用图像的精确尺寸来避免缩放。

然而，这不是理想的解决方案，因为响应式网页设计确实需要提供略微不同大小的图像，并允许上下文适当地缩放图像，理想情况下缩小尺寸。

图像在IE中显示像素化

2 个答案: