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

问题描述 投票:0回答:2

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

enter image description here

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

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

enter image description here

我选择在我的public/index.html中使用Jquery,因为我需要它来随机改变我的背景图像,这要归功于我的一个函数(我不能在url()中为CSS文件中的background-image调用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');
  }
});

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

javascript jquery html css reactjs
2个回答
0
投票

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

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


0
投票

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)。

© www.soinside.com 2019 - 2024. All rights reserved.