背景圖片：始終覆蓋整個頁面

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;
   }
}

您可以在此處了解有關媒體查詢的更多信息。