当我在移动设备上从顶部滚动时，我的背景图片会稍微调整大小。当我再次滚动到顶部时，它会恢复到原来的大小。 可以看看here
我试过用
background-attachment: fixed;
除了您可以在下面看到的所有其他 css 代码之外，但它不起作用。
CSS
.bg-1, .bg-2, .bg-3,
.bg-1:after, .bg-2:after, .bg-3:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.bg-1 li span, .bg-2 li span, .bg-3 li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 1;
z-index: 0;
}
.bg-1 li span { background-image: url(../images/slide-1.jpg); }
.bg-2 li span { background-image: url(../images/slide-3.jpg); }
.bg-3 li span { background-image: url(../images/slide-2.jpg); }
ol,ul {
list-style:none;
}
html
<body>
<ul class="bg-2">
<li><span></span></li>
</ul>
<nav class="navbar">
<div class="container-fluid social-nav">
...
只是为了解释一下，这是一个列表，因为如果我想制作一个幻灯片库，它可以添加更多
<li><span></span></li>
但我只在主页使用幻灯片。
如何防止调整大小？
最佳答案
如果背景图像在初始滚动时调整大小，我假设具有该背景的元素必须具有动态高度，使用 CSS 或 JS/jQ 脚本中的 vw/vh 生成。我遇到了同样的问题，我发现我认为是解决这个问题的正确方法(至少在移动浏览器提供自己的解决方法之前)。
使用一个简单的 jQuery 函数，您可以在页面加载时存储窗口的宽度，并使用它来限制容器的调整大小功能，以将视口(viewport)尺寸限制为比桌面断点 (992px+) 宽的视口(viewport)尺寸和较窄的视口(viewport)尺寸，只要视口(viewport)宽度发生变化，不只是高度。这样，在移动设备和平板设备上，当您滚动时，只有垂直视口(viewport)调整大小，因此不会触发调整大小功能。
var breakpoint = 991;
var bgHeight = function() {
$('#bg').css('height', $(window).height() + 'px');
}; bgHeight();
var windowWidth = $(window).height();
$(window).on('resize', function() {
if ((($(this).width() <= breakpoint) && ($(this).width() != windowWidth))
|| ($(this).width() > breakpoint)) {
bgHeight();
}
windowWidth = $(window).width();
});
关于html - 防止背景图像在滚动时调整大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41525157/