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 according to the background-size docs“在不拉伸图像的情况下尽可能大地缩放图像。如果图像的比例与元素不同，则会垂直或水平裁剪，以便不留空的空间。”

这意味着它可以缩放到最小的“非压扁”尺寸，可以防止容器中的任何空白空间。由于您的网站（即#main）在移动设备上大致是3000px，因此背景图像的缩放比例高达~3000px。

如果要将其约束为最大宽度，请使用background-size: contain“尽可能缩放图像而不裁剪或拉伸图像”。这意味着它将始终填充容器而不会被切断。请注意，这将根据您的background-position设置为您提供图像下方（或上方）的空白区域。