关键词：
【中文标题】垂直添加元素时如何防止背景图像在移动浏览器上缩放？【英文标题】：How to prevent background-image from zooming on mobile browser when adding elements vertically? 【发布时间】：2019-09-09 13:58:31 【问题描述】：我有一个 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');
);
我的目标是在移动设备上固定背景图像而不移动和缩放，并且能够向下滚动以查看我添加的所有元素。
【问题讨论】：
嗨，我认为是“背景尺寸：封面”规则导致了这种行为发生。当您添加元素时，页面大小会发生变化，背景大小也会发生变化。您是否尝试过硬编码值？ 是的，我试过了，但它不起作用。 【参考方案1】：我相信这与这条线有关$('html, body').css('background-size', 'cover');
为background-size 尝试不同的值。你可以阅读更多关于它的信息here。
cover 值会调整背景图像的大小以覆盖整个容器，即使它必须拉伸图像 或从其中一个边缘剪掉一点.
【讨论】：
这也可能与background-position 有关，尝试将其设置为center 以外的其他值。在此处阅读更多信息：w3schools.com/cs-s-ref/pr_background-position.asp。请记住使用background-size 到auto 而不是cover，这样它就不会拉伸。
我相信center 上的background-position 将在添加新元素后容器展开时将图像置于中心。我现在无法测试它，但与background-size cover 一起它会产生缩放效果。尝试将background-position 放入center-top 或left-top 并将background-size 放入auto 或contain。祝你好运！【参考方案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）。
【讨论】：
你在桌面上试过这个。可悲的是，它不适用于我的移动应用程序版本。对于框架混合我同意，但是没有办法从你的css文件中调用背景图像的url属性中的函数，这就是我说I chose to use Jquery in my public/index.html because I need it to change randomly my background image的原因
你说得对，我在 Safari 桌面上进行了测试，认为它在 Safari 移动版上也能正常工作......这似乎与 body 上的样式有关。我更新了我的答案并使用了一个后台容器，它可以在我的手机上运行。
它不工作，我不知道如何解决这个问题。无论如何，非常感谢您的帮助如何防止在 Safari 移动浏览器上捏缩放（滚动）？
】如何防止在Safari移动浏览器上捏缩放（滚动）？【英文标题】：Howtopreventpinchtozoom(onscroll)onsafarimobilebrowser?【发布时间】：2018-03-1815:26:48【问题描述】：我需要我的Web应用程序作为本机移动应用程序运行。为此，我需要防止在... 查看详情
iPhone iOS：如何在图像背景上动态移动/调整图像大小？
...许用户执行以下操作的应用：设置背景图片在背景图片上添加图片允许用户通过触摸和拖动来移动图像允许用户旋转/缩放这些图像具体来说，我有兴趣 查看详情
首页英雄背景图像在移动设备上未正确缩放
】首页英雄背景图像在移动设备上未正确缩放【英文标题】：FrontpageherobackgroundimageimproperlyscaledonMobile【发布时间】：2018-04-2004:15:07【问题描述】：在我的wordpress网站上，首页英雄的背景在移动设备（iOS和Android）上缩放不当。它... 查看详情
css3中的变形处理
...小了50%。另外，可以分别指定元素水平方向的放大倍率与垂直方向的放大倍率。上面的示例使div元素水平方向缩小了50%，垂直方向放大了一倍。效果如图：使用skew方法来实现文字或图像的倾斜处理，在参数中分别指定水平方向... 查看详情
如何将背景图像添加到 UICollectionView 将滚动和缩放单元格
...我已将UICollectionViewFlowLayout子类化为布局一个可以水平和垂直 查看详情
在 iPad 和 iPhone 上缩放时背景图像模糊
】在iPad和iPhone上缩放时背景图像模糊【英文标题】：BackgroundimageblurrywhenscalingoniPadandiPhone【发布时间】：2011-08-0720:53:53【问题描述】：我正在创建一个网络应用程序，允许用户缩放某些100x100像素的背景图像。当他们双击图像时... 查看详情
在iOS中的iPad上捏缩放将图像移动到最左角？
...张图片。当我捏住它移动到左上角的图像时，我在图像上添加了捏合手势。我还在图像上添加了平移手势。当图像被缩放时，我会向各个方向滚动图像，为此我已将平移手势添加到图像中。我的代码是：-(void)vi 查看详情
如何在背景图像上垂直对齐文本？ [复制]
】如何在背景图像上垂直对齐文本？[复制]【英文标题】：HowdoIaligntextverticallyoverabackgroundimage?[duplicate]【发布时间】：2015-02-2021:16:38【问题描述】：当人们将鼠标悬停在该图像上时，我试图在图像上覆盖具有白色半透明背景的文... 查看详情
如何在 Firefox 中不尊重纵横比的情况下缩放 SVG 背景图像？
...2014-11-2021:24:49【问题描述】：我在一个高度和宽度可变的元素上设置了CSSbackground-image。它是一个SVG，预期的行为是让它在覆盖整个元素区域所需的任何方向上拉伸。在Chrome 查看详情
图像未放大时如何停止移动图像？
】图像未放大时如何停止移动图像？【英文标题】：howtostopmovingimagewhenimageisnotzoomedin?【发布时间】：2015-11-0211:14:36【问题描述】：我有一个UIImageView我正在执行缩放缩放和全缩放移动图像。我可以移动图像但问题是即使图像没有... 查看详情
背景：固定没有重复不能在移动设备上工作
...果向下滚动，背景图像会保持在同一个位置）。我在桌面浏览器中使用下面的CSS实现了这一点，但它不适用于iPhone或iPad。在这些设备上，背景太大（它在折 查看详情
CSS：在一个元素上缩放和旋转多个 SVG 背景图像 - 没有 JS 可能吗？
】CSS：在一个元素上缩放和旋转多个SVG背景图像-没有JS可能吗？【英文标题】：CSS:ScaleandrotateinplacemultipleSVGbackgroundsimageononeelement-possiblewithoutJS?【发布时间】：2022-01-1322:26:38【问题描述】：目标是这个coolsparkleeffectbyJoshWComeau：他... 查看详情
如何将图像居中和自动缩放？
...【问题描述】：可能是CSS布局最常见的两个问题：水平和垂直居中。将图像自动缩放到视口大小（保持纵横比，不会垂直或水平溢出）。单独来说，两者都有很好的解决方案：在外部容器元素上使用display:table，在内部容器元素... 查看详情
为啥在 IE 上滚动时固定的背景图像会移动？
...blog中看到的，background-image在IE11上滚动时正在移动。我该如何解决这个问题？这是我的CSS： 查看详情
如何在图像放大时隐藏背景
】如何在图像放大时隐藏背景【英文标题】：howtohidebackgroundwhenimageiszoomedin【发布时间】：2017-05-1101:30:26【问题描述】：我有一个点击手势识别器连接到我的图像视图。当图像被点击时，它会变成全屏，再次点击时，它会被关闭... 查看详情
ios：如何在背景图像上添加 uiLabel？
】ios：如何在背景图像上添加uiLabel？【英文标题】：ios:howtoadduiLabelontopofthebackgroundimage?【发布时间】：2014-11-1005:13:00【问题描述】：我正在尝试将uiLabel添加到作为背景图像的uiImageVIew之上。在uiImageView之上添加uiLabel时，在测试... 查看详情
如何防止背景图像在更改时闪烁
】如何防止背景图像在更改时闪烁【英文标题】：Howtopreventabackgroundimageflickeringonchange【发布时间】：2014-04-1118:16:19【问题描述】：我正在通过javascript将画布中的重复背景图像应用到div，如下所示：varimg_canvas=document.createElement(\'c... 查看详情
如何在不移动图像下方的背景图像上居中文本？ HTML/CSS
...gintop属性来移动文本以使其在图像上居中，但它也为图像添加了边距。 查看详情