background-image：始终覆盖整个页面

Question

我想要实现的目标：

如果网站具有宽屏宽高比，背景图像应水平缩放至100％，从而裁剪顶部和底部。 我可以使用background-size: cover;

轻松实现这一目标

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

如何同时实现这两个目标（仅使用css）？

Answer 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。