wordpress背景圖片在移動設備中無響應

Question

我的網站是（ https://www.yahoonewsz.com ），並且我已將圖像上傳到服務器的public_html文件夾中。

我已經使用以下代碼作為背景

#main {
  background-image: url("image908.jpg");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

在WordPress的高級CSS部分中。

為什么圖片在移動設備中沒有響應？

謝謝。

Answer 1

您使用的是background-size: cover 根據background-size docs進行 background-size: cover ，即“在不拉伸圖像的情況下將圖像盡可能地縮放。如果圖像的比例與元素不同，則將其垂直或水平裁切，以便沒有剩余空間。”

這意味着它將縮放到最小的“非壓縮”尺寸，以防止容器中有任何空白空間。 由於您的網站（即#main ）在移動3000px高度大約為3000px ，因此背景圖片的尺寸已縮放為3000像素左右。

如果要將其限制為最大寬度，請使用background-size: contain “在不裁剪或拉伸圖像的情況下將圖像縮放到盡可能大的比例”。 表示它將始終填充容器而不會被切斷。 請注意，這將根據您的background-position設置為您提供圖像下方（或上方）的空白。