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

我想要达到的目标：

如果站点具有宽屏纵横比，则背景图像应水平缩放至100%，从而裁剪顶部和底部。 我可以通过使用

背景尺寸：cover

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

如何同时实现这两个目标（仅使用css）？
您可以使用媒体查询来完成所需的任务，请在主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;
   }
}

您可以了解更多信息。
背景重复：无重复？在IOS上？因为IOS WebView有一些bug，涉及
背景大小：cover
。检查“已知问题”谢谢dude:）我不知道我怎么能忘记媒体查询，可能是因为时间太晚了：D在响应式网络设计中，我总是设法避免媒体查询，但这似乎是我不能再做的地方。