调整图像大小以进行视网膜显示

Question

我试图找到一种方法来调整视网膜显示的图像大小，而不是背景图像或使用不同的图像。

我的计划是使用800x600 px图像，而对于普通显示器，只需将其取样至400x300，但对于视网膜，将其保持在800x600但像素密度加倍，即它的外观显示为400x300，但它的两倍于像素密度。

有没有办法在CSS中执行此操作？

我能得到的最接近的是找到视网膜比例：

@media only screen and (-webkit-min-device-pixel-ratio: 2) {}

但是如何使图像以像素密度的两倍显示，有效地使其在视网膜上的尺寸减半？

Answer 1

也许你会通过imulus来使用这个Retina.js - 似乎有各种各样的工具可用于处理仅视网膜的媒体查询。

这里是链接：http://imulus.github.io/retinajs/

但是，它不是一种处理CSS的方式，你必须在这里给JavaScript一点点爱。