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设置为您提供图像下方（或上方）的空白。