Question

我在使用自适应背景时遇到问题。 http://poppykeith.co.uk/index.html在移动浏览器上的计算机浏览器和横向视图中看起来是正确的，但是当在移动设备（即使用iOS）上纵向观看时，图像会被挤压以适应屏幕。

如何让图像在纵向模式下放大而不拉伸？

由于

Answer 1

您编写的代码几乎可以使用，但min-width:1024px和width:100%规则相互冲突并导致您看到的压缩效果。基本上，width胜过min-width。

您想要使用的真正技术是将该图像设置为body元素的背景，然后使用background-size:cover使浏览器正确加载它

body { 
    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;
}

详细信息：http://css-tricks.com/perfect-full-page-background-image/

Answer 2

查看此文章：http://www.teknocat.org/blog/web-development/show/6/mobile-safari-background-image-scaling-quirk

它讨论了Mobile Safari如何缩小大图像的范围。

在画象机动性被压碎的敏感背景

2 个答案: