调整图像的视网膜显示

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

我的计划是使用800x600像素的图像，对于普通的显示器，简单地将其取样为400x300，但对于视网膜来说，它保持在800x600，但像素密度是双倍，即它显示出400x300的外观，但它具有两次像素密度。

有没有办法在CSS中做到这一点？

我能得到的最接近的是这样的发现视网膜比：

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

但后来如何使图像显示的像素密度的两倍，这实际上使得视网膜上一半大小？

来源

2017-02-25 Jimmy

_“对于普通显示器来说简单地将其取样为400x300，但对于视网膜来说它保持在800x600，但像素密度是双倍，即它显示出400x300”_“ - 不需要任何媒体查询，只是'宽度：400像素; height：300px;' - _ because_ CSS像素和设备像素是不同的东西。 – CBroe

也许你会通过imulus对Retina.js进行一些使用 - 似乎有很多种工具可用于处理仅有视网膜的媒体查询。

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

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

来源

2017-02-25 13:04:25

调整图像的视网膜显示

回答

相关问题