更新

Question

我有一个网站，可以提供不同外形的手机和平板电脑。我有一个背景图像，我想要的主页，并希望该图像拉伸（可能扭曲），以适应可用的区域。

这样做的最佳方式是什么？

是否有一个很好的替代方案可以合理地容纳不会扭曲图像的各种形状因素（即平板电脑/手机）？

===============================

更新

我利用了这段代码。

.transparent-background {
    background: transparent;
}

.background-image {
  background: url(app-background.jpg);
  background-repeat:none;
  background-position:center center;
  background-attachment:scroll;
  background-size:100% 100%;    
}

我将透明背景作为一个类添加到Page和Content元素中，然后将background-image类添加到页面元素中，这似乎可以解决问题。

Answer 1

您是否尝试过CSS3属性background-size：cover;

http://www.css3.info/preview/background-size/

如果使用了封面关键字，则缩放背景图片，再次保留图像的原始比例/宽高比，这个时间要尽可能大，以便背景定位区域完全被背景图像覆盖，即。这俩图像宽度或高度等于或大于背景定位区。因此，再次取决于是否背景图像的比例与背景图像的比例相匹配定位区域，背景图像的某些部分可能不在查看背景定位区域。

它与每个浏览器都不兼容，但应该适用于设备 - Compatibility

Answer 2

我想说你可以通过改变/修改CSS来做到这一点。

img {
  max-width: 100%;
}

请尝试阅读本文，以便更好地理解。

http://www.alistapart.com/articles/fluid-images/

Answer 3

要回答第二个问题，您可以使用@media规则为不同的屏幕尺寸/设备指定不同的样式。例如：

@media all and (min-width: 750px) {

/*Any styles in here will only be applied to browsers(screens, etc) with a width > 750px */

}

因此，您可以通过覆盖当前样式来根据屏幕大小设置不同的背景图像/布局。即，对于较大的屏幕，您可能将更多高清晰度图像设置为div，图标等的背景。如果这是有道理的。

如何在jQuery Mobile CSS中拉伸背景图像以适应所有屏幕尺寸

更新

3 个答案: