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

您正在使用according to the background-size docs的background-size: cover“将图像放大到尽可能大的程度，而无需拉伸图像。如果图像的比例与元素不同，则会垂直或水平裁剪图像，因此没有剩余的空间。”

这意味着它将缩放为最小的“非压缩”尺寸，以防止容器中有任何空白空间。由于您的网站（即#main）在移动设备上的高度大约为3000px，因此背景图片的尺寸已缩放到约3000px。

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

wordpress背景图片在移动设备中无响应

1 个答案: