仅使用一张图像检查是否有视网膜

Question

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

我看到了这个blogpost，但他正在使用两张图片/图片。如果可能的话，我不想要那个。

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图片，它将会有这些“脆弱的边缘”＃34;

为了向您展示我的意思，我使用Chrome和IE（Edge）拍摄了我使用的相同照片的两个屏幕截图。以下图像的原始大小为500x500，但缩小为100x100。

铬

IE

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

Answer 1

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

-ms-interpolation-mode: bicubic;

默认使用：-ms-interpolation-mode: nearest-neighbor;

交换重采样方法可能会解决您的问题，具体取决于您使用的IE版本。

以下是CSS技巧所说的内容：

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