html - 响应式背景在人像手机中被压扁

Question

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

我如何才能让图像在纵向模式下只放大而不拉伸(stretch)？

谢谢

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/