背景图像：始终覆盖整个页面

【问题标题】：background-image: always cover whole page背景图像：始终覆盖整个页面
【发布时间】：2015-04-21 08:30:23
【问题描述】：

我想要达到的目标：

如果网站具有宽屏纵横比，则背景图像应水平缩放至 100%，从而裁剪顶部和底部。我可以通过使用background-size: cover; 轻松实现这一目标

但如果网站具有垂直纵横比（例如智能手机），则图像会垂直重复。我真正想要的是，图像现在垂直缩放到 100%，这将裁剪左右部分。

如何同时实现两者（仅使用 css）？

【问题讨论】：

background-repeat:no-repeat;?
在IOS上？因为IOS WebView有一些涉及background size: cover的bug。检查“已知问题”here

标签： html css

【解决方案1】：

您可能可以使用媒体查询来完成您需要的事情，在您的主 css 中使用它。媒体查询允许您根据显示的大小更改类属性。

body {
    background-size: cover;
    background-repeat: no-repeat;
}

/* ----------- iPhone 6 ----------- */

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
   body {
    background-repeat: repeat-y;
   }
}

您可以了解更多关于media queries here的信息。

【讨论】：

谢谢老兄 :) 不知道我怎么能忘记媒体查询，可能是因为为时已晚 :D 我总是设法在响应式网页设计中避免媒体查询，但这似乎是我的重点不能了。