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

【问题标题】：How to set high resolution images for iphone4 using css如何使用 css 为 iphone4 设置高分辨率图像
【发布时间】：2011-11-07 21:52:34
【问题描述】：

在 iphone4 图像不以高分辨率显示，它显示低分辨率图像。

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

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

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

【问题讨论】：

标签： iphone

【解决方案1】：

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

希望对您有所帮助。

【讨论】：

【解决方案2】：

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

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

它在 UIWebView 中运行良好。不过不确定是否使用 CSS。

【讨论】：

【解决方案3】：

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

【讨论】：