如何使用css为iphone4设置高分辨率图像

Question

在iphone4中，图像没有以高分辨率显示，显示低分辨率图像。

如何使用css更改iphone4的高分辨率图像？

---

为了澄清，我们正在使用html和jquery开发phonegap高分辨率图像最终在应用程序中像素化。 .png图像的名称为@ 2x.png，原始文件与png文件匹配。

我们已经利用了这些做法 http://aralbalkan.com/3331 和 http://davidehlers.com/2011/03/iphone ...

图像看起来比原始图像略小，并且显着像素化。我附上了Venky所指的问题的重叠。这是右侧的buttonsml@2x.png，位于iPhone4应用截图的顶部。

Answer 1

不确定CSS，但通常情况下，您可以将“@ 2x”附加到正常的图像名称，这将适用于Retina Display。因此，您可能不需要在CSS中提及它，只需将@ 2x放入图像并将其添加到项目中。例如，对于icon.png，它将是icon@2x.png。

希望得到这个帮助。

Answer 2

我已经通过在图像标签中使用@ 2x版本并指定宽度/高度为@ 2x图像大小的一半来实现此功能。例如，使用200 x 80“item@2x.png”时，我会使用：

<img src="item@2x.png" width="100" height="40">

它在UIWebView中运行良好。不知道用CSS做这件事。

Answer 3

您必须使用高分辨率图像。如果您在代码中加载图像（UIImage imageNamed），SDK将自动选择高分辨率版本（@ 2x），但如果您正在通过任何其他方法进行操作，则必须自己选择。