html - 在纵向移动中被压扁的响应背景

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 如何喜欢缩小大图像。