0

正如标题所说。是否可以只使用一张已经适合视网膜的图片，但是当不使用视网膜屏幕时，图片会自动调整大小/裁剪为非视网膜图片？我在使用 IE 时遇到了这个问题（而且我使用的是 PC）。我所有的图片在 Chrome、Opera、Moz 等其他浏览器中看起来都很棒。但是当我在 IE 中查看同一张图片时，它有这些“丑陋的边缘”。

我看到了这篇博文，但他使用了两张图片/图像。如果可能的话，我当然不希望那样。

var retina = window.devicePixelRatio > 1;

if (retina) {
    var html = '<img src="my-high-res-image.jpg">';
}
else {
    var html = '<img src="my-low-res-image.jpg">';
}

更具体地说：如果我的图像是 500x500 并且在我的 CSS 中，由于视网膜屏幕，我将其缩小到 100x100 像素。但是，如果屏幕不是视网膜并且我使用的是我缩小的 500x500 图片，它就会有这些“脆边”。

为了向您展示我的意思，我使用 Chrome 和 IE(Edge) 为我正在使用的同一张图片拍摄了两张屏幕截图。以下图片的原始尺寸为 500x500，但已缩小为 100x100。

在此处输入图像描述 铬合金

在此处输入图像描述 IE

如果我不够清楚，那么回到我的问题：我可以使用一张图像，但在需要时告诉它是否是视网膜？

4

1 回答 1

0

它是 IE 在浏览器中处理图像重采样的方式。您应该可以通过在 CSS 中使用它来解决此问题：

-ms-interpolation-mode: bicubic;

默认情况下，它使用：-ms-interpolation-mode: nearest-neighbor;

根据您使用的 IE 版本，交换重采样方法可能会解决您的问题。

这是 CSS Tricks 必须说的：

http://css-tricks.com/ie-fix-bicubic-scaling-for-images/

于 2014-10-21T12:33:34.597 回答