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

Question

我要实现的目标：

如果该站点具有宽屏纵横比，则背景图像应水平缩放到100％，从而裁剪出顶部和底部。 我可以通过使用background-size: cover;轻松实现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;
   }
}

您可以在此处了解有关媒体查询的更多信息。