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

Question

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

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

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

我之所以选择在public/index.html中使用Jquery是因为由于我拥有一个函数，我需要它来随机更改我的背景图片（我无法在url()的{​​{1}}内调用js函数}）。

我的桌面版本也具有以下功能，并且可以正常工作，所以我知道我必须在此处修改CSS：

background-image

我的目标是在不移动和缩放Mobile的情况下固定背景图片，并能够向下滚动以查看我添加的所有元素。

Answer 1

我认为这与$('html, body').css('background-size', 'cover');行有关 为background-size尝试一个不同的值。您可以详细了解here。

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

Answer 2

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

如果将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）。