CSS：背景图像在手机和平​​板电脑上放大，Bootstrap

Question

我在移动设备上使用视差背景图片时遇到了一些问题。当它显示在移动设备上时，图像会被放大，所以我看不到它是什么，无论我在横向还是纵向使用它都没有关系。同样的问题也出现在平板电脑上。

我用background-size: 100% auto; 试过了，现在你可以看到它了，但它实在是太丑了。 还尝试了background-size: contain;，但这也没有完成这项工作并且也弄乱了桌面视图。 视差功能也无法在移动设备上运行，但这对我来说并不重要。

同样的问题也出现在平板电脑上。

Here's what you see on mobile, when I use background-size: cover;

Here's what you see on mobile, when I use background-size: 100% auto;

.intro {
  position: relative;
  width: 100%;
  height: 100%;
  color: #fff;
  background-color: #111;
  min-height: 600px;
  padding: 0;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center center;
  overflow: hidden;
  background-attachment: fixed;
}

<section id="intro" style="background-image: url('img/background.jpg'); no-repeat;" class="intro">

感谢您的帮助

附：我是新来的，所以我希望我问的是正确的方法:)

Answer 1

background-size:cover 在您的情况下是正确的方法。

放大的原因是background-size: cover 试图填充完整视口（您使用height:100% 和width:100% 定义）。您的图像没有针对手机进行优化。我敢打赌，如果您将手机保持在横向模式，它会很好看。这是因为您的图像的宽度大于高度。

我建议您使用第二张图片，然后在移动设备上使用。您可以使用基本的图像编辑工具（例如paint 或paint.net）剪下一块可以在手机上使用的图像。