在纵向移动中被压扁的响应背景答案

【问题标题】：Responsive background being squished in portrait mobile在纵向移动中被压扁的响应背景
【发布时间】：2012-06-27 06:23:06
【问题描述】：

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

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

谢谢

【问题讨论】：

标签： html css background-image responsive-design

【解决方案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/

【讨论】：

【解决方案2】：

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

它讲述了 Mobile Safari 如何喜欢缩小大图像。

【讨论】：