背景图像调整大小：响应式主题答案

【问题标题】：Background Image resize: Responsive theme背景图像调整大小：响应式主题
【发布时间】：2013-12-17 08:24:29
【问题描述】：

我在网页上的全屏背景图片遇到了一些问题。它通过桌面浏览器（IE、Chrome、Safari...）看起来很棒，但是当响应式主题 CSS 启动时，它不会调整到正确的分辨率。

对于桌面和响应式 CSS：

background: url(background.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
-webkit-overflow-scrolling: touch;

我尝试过根据媒体最大宽度使用不同的 jpeg 大小，我也尝试过仅使用 left:0px; 应用背景图像，我尝试过 background-size:contain; 和 background-size: cover !important; 但没有成功。最令人沮丧的是：在 firefox 调试器 > 响应式视图 > 它完美无瑕，但通过真正的手机/平板电脑，背景被炸毁和像素化（当然你不能指望调试器工作）。

这也很困难，因为从技术上讲，该网站都是一个页面......每个“虚拟页面”都是一个单独的 div。

火狐响应：

实际的 iPhone 响应式（很难看到，但在下一页有一张新图片，而且很大）：

【问题讨论】：

标签： css responsive-design

【解决方案1】：

我能想到的一个解决方案是设置一个适合较小/移动屏幕的媒体查询并在那里设置一个background-size:auto 100%，因为我理解的主要问题是让您的图像适合整个高度。

【讨论】：

这本质上是在做封面或包含正在做的事情。在通过桌面浏览器测试响应式主题时有效，但在移动设备上时会中断。我不明白。
我也将这些值用于背景大小，但有些移动浏览器不支持这些值。

【解决方案2】：

我找到了调整图片大小的关键：

background: url(background.jpg) no-repeat local center top; 
        -webkit-background-size: 125% auto;

玩转百分比并使用这个 ^ webkit

http://kimili.com/journal/the-flexible-scalable-background-image-redux

^ 进一步阅读

【讨论】：

我发现这个效果更好：background: url(../content/cheetah.jpg) 50% 50% / cover no-repeat fixed;

【解决方案3】：

如果适合您，您可以尝试以下代码：

background: url(background.jpg) no-repeat center center fixed; 
 -webkit-background-size: 100% 100%;
 -moz-background-size: 100% 100%;
 -o-background-size: 100% 100%;
 background-size: 100% 100%;

【讨论】：

这确实可以将整个图像放到页面上，但是由于无法缩放，因此非常失真。
您可以尝试更改小屏幕的百分比。