Question

这是我需要做的。我需要使用phonegap为ipad和iphone制作移动应用程序，我需要将图像背景设置为应用程序中的所有页面。我想在高分辨率下使用.png图像（我将支持的最高图像），但我不确定如何在不保持纵横比时处理图像重新调整大小。例如，如果我使用1136X640（iphone5）的图像，它将如何在iphone4（res：960 x 640）上显示。或者我应该检查设备并为不同的设备提供不同的图像？请帮忙。

Answer 1

在css3中使用background-size属性

e.g。

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

IE hack（低于IE9）

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

它适合您的屏幕背景图像＆amp;仍保持图像的宽高比。

这是一个很好的教程，Click Here

Answer 2

您可以在CSS中将图像添加为背景：

body{
    background-image:url('your_url');
    background-size:cover;
}

这样它会填满你的身体

不同分辨率设备的页面背景图像缩放

2 个答案: