Bootstrap视差效果问题：右侧留白与移动端图片适配异常

问题1：页面右侧留白修复方案 #

• 给body添加overflow-x: hidden，阻止横向滚动条产生，消除右侧留白
• 将标题文字的字体单位改为响应式vw，确保文字不会超出视口宽度
• 移除container-fluid对容器的内边距限制，让视差容器直接占满整个视口宽度

问题2：视差图片移动端适配修复方案 #

• 将图片固定高度height: 700px改为height: 100vh，让图片高度匹配当前视口高度
• 添加object-fit: cover属性，保证图片按原有比例填充容器，避免拉伸变形
• 可选：用object-position调整图片显示区域，确保核心内容可见

修改后的完整代码 #

JavaScript代码

var perrito = document.getElementById('texty');

window.addEventListener('scroll', () => {
    var value = window.scrollY;
    perrito.style.marginTop = value * 2.5 + 'px';
})

（注：移除了未使用的two变量）

CSS代码

/* 全局阻止横向溢出 */
body {
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

.parallaxh {
  position: relative;
  height: 100vh;
  display: flex;
  justify-content: center;
}

#texty {
  position: absolute;
  /* 响应式字体，随视口宽度缩放 */
  font-size: 8vw;
  color: #fff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  text-align: center;
}

.parallaxh img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /* 匹配视口高度 */
  height: 100vh;
  pointer-events: none;
  /* 保持图片比例，覆盖容器 */
  object-fit: cover;
  /* 居中显示图片核心区域 */
  object-position: center;
}

.sec {
  position: relative; 
  background-color: aquamarine;
  /* 移动端适配内边距 */
  padding: 50px 20px;
}

HTML代码

<!-- 移除container-fluid，让视差容器占满全屏 -->
<div class="parallaxh">    
  <img src="Images/Servicios_n/servicios1.png" id="one" alt="服务背景图">  
  <h2 id="texty">Servicios</h2>
</div>

<div class="sec">
 <h2>holitas</h2>
 <p>Culpa consequat dolor irure excepteur adipisicing incididunt cillum velit veniam nisi nulla velit ex laborum. Sunt incididunt consequat enim proident voluptate nostrud labore qui nostrud sunt. Ipsum sit amet commodo dolore.

Elit voluptate minim consequat tempor consequat dolor dolore ut sit mollit enim. Adipisicing amet ad minim et cillum aute laboris labore duis pariatur incididunt. In sunt laborum voluptate veniam adipisicing exercitation non commodo occaecat cupidatat irure pariatur. Ut laborum ullamco exercitation magna ex est aliquip dolor ex qui aliquip veniam.

Aliquip laborum ad magna non enim laboris commodo sint occaecat magna consequat. Sunt aute mollit consequat ut sunt voluptate aliquip aliquip non nisi fugiat dolore mollit cupidatat. Quis ex quis do elit.
 </p>
</div>

内容的提问来源于stack exchange，提问作者Le Dragon