垂直添加元素时如何防止背景图像在移动浏览器上缩放？

Question

我有一个 ReactJS 应用程序，当我按下“发布”按钮时，我从上到下垂直添加元素。

当我添加元素时，它们可以很好地显示在移动和桌面浏览器上。

但是，在移动浏览器上，每次添加元素时，背景图像都会不断缩放。

我选择在我的public/index.html 中使用 Jquery，因为我需要它来随机更改我的背景图像，这要归功于我拥有的一个函数（我不能在 CSS 文件中为 background-image 调用 url() 内的 js 函数） .

我的桌面版本也有以下内容并且它可以工作，所以我知道我必须在这里修改我的 CSS：

$(document).ready(function() {
  const randomImage = chooseBackground();
  if ($(window).width() < 650) //mobile browser
  {
    $('html, body').css('background-image', `url(${randomImage})`);
    $('html, body').css('background-repeat', 'no-repeat');
    $('html, body').css('background-attachment', 'fixed');
    $('html, body').css('background-size', 'cover');
    $('html, body').css('background-position', 'center');
  }
});

我的目标是在移动设备上固定背景图像而不移动和缩放，并且能够向下滚动以查看我添加的所有元素。

Answer 1

我相信这与这条线有关$('html, body').css('background-size', 'cover'); 为background-size 尝试不同的值。你可以阅读更多关于它的信息here。

cover 值会调整背景图像的大小以覆盖整个容器，即使它必须拉伸图像 或从其中一个边缘剪掉一点.

Answer 2

background-size: cover 将使用垂直或水平框限制来将图像完美地放入容器中。添加元素时，你的 body 会垂直增长，这意味着它必须将图像放入比以前“更高”的容器中，因此看起来像是在缩放。

如果您将max-height: 100vh 设置为正文和overflow: auto，它应该可以工作，请参阅this fiddle。

尽管如此，您也应该考虑使用 React 来处理背景图像，因为混合框架通常不是一个好的选择。

更新

我现在在手机上试过了，看来这与 Safari 手机上的身体缩放有关。如果您将页面包装在 <div class="wrapper"> 或类似内容中并将样式应用于此容器，它将保持背景图像大小，因为可以限制包装器的大小。

请注意，由于 Safari 的弹簧滚动，这可能会导致滚动体验不佳，请在手机上查看 this codepen。

IMO，最简单的解决方案是使用<div class="background"> 容器，即position: fixed 并且具有较低的z-index，例如this codepen。

.background {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: -1;

  background-image: url(http://placehold.it/300x300);
  background-attachment: fixed;
  background-size: cover;
  background-position: center center;
}

这适用于我的手机（尝试在手机上打开result view）。