响应式背景在纵向移动设备中被压扁

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/