1

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

做这个的最好方式是什么？

是否有一个很好的替代方案可以合理地适应完全不同的外形尺寸（即平板电脑/手机）而不会扭曲图像？

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

更新

我利用了这段代码。

.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 元素中，然后将背景图像类添加到页面元素中，这似乎可以解决问题。

4

3 回答 3

0

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

img {
  max-width: 100%;
}

尝试更多地阅读这篇文章以获得更好的理解。

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

于 2012-09-28T16:49:52.913 回答
0

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

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

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

}

因此，您可以通过覆盖当前样式来根据屏幕大小拥有不同的背景图像/布局。即，您可能将更多高清图像设置为 div、图标等的背景以用于更大的屏幕。如果那有意义的话。

于 2012-09-28T16:50:46.440 回答
0

你试过 CSS3 属性 background-size:cover;

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

如果使用了cover关键字，则对背景图片进行缩放，再次保留图片的原始比例/纵横比，这次要尽可能大，使背景定位区域完全被背景图片覆盖，即。图像宽度或高度都等于或超过背景定位区域。如此，再次取决于背景图像的比例是否与背景定位区域的比例匹配，背景图像的某些部分可能不在背景定位区域内。

它不兼容所有浏览器，但对设备应该没问题 -兼容性

于 2012-09-28T16:43:49.840 回答