如何解决网站移动端裁剪图片时出现的页面向左滚动问题

你使用position: absolute; margin-left: 50%;实现居中裁剪时，图片向左偏移后超出视口的左侧部分会被浏览器计入页面总宽度，因此产生了可向左滚动的横向滚动空间。
之前object-fit没有生效，大概率是没有给图片元素明确设置固定的显示高度，object-fit仅在元素本身有明确宽高尺寸时才会触发裁剪逻辑。

方案1：使用object-fit实现（推荐，代码最简） #

直接给移动端图片设置固定宽高+裁剪属性，不需要额外父元素，完全不会产生溢出滚动：

.mobile-banner-img {
  width: 100%;
  /* 自定义你需要的移动端显示高度 */
  height: 280px;
  /* cover属性会保持图片比例，填满整个元素框，超出部分自动裁剪 */
  object-fit: cover;
  /* 控制裁剪位置，center为居中裁剪，left为保留左侧裁剪右侧，right为保留右侧裁剪左侧 */
  object-position: center;
}

方案2：父容器包裹+溢出裁剪 #

如果需要更灵活的布局控制，可以给图片加一层父容器，把溢出部分隐藏：

/* 父容器样式 */
.banner-wrap {
  width: 100%;
  /* 自定义显示高度 */
  height: 280px;
  overflow: hidden;
  position: relative;
}
/* 图片样式 */
.banner-wrap img {
  position: absolute;
  left: 50%;
  /* 用transform做偏移不会影响页面布局宽度，替代margin-left */
  transform: translateX(-50%);
  height: 100%;
  width: auto;
}

方案3：兜底禁止页面横向滚动 #

如果不想修改现有布局逻辑，可以直接给页面根元素设置禁止横向滚动，所有溢出内容都不会触发滚动条：

html, body {
  overflow-x: hidden;
}

• 不要使用margin-left做水平居中偏移，改用left: 50% + transform: translateX(-50%)的组合，transform产生的偏移不会改变元素的布局占位，不会生成额外滚动空间。
• 所有移动端元素的宽度不要超过100vw，超出设计宽度的内容必须用父容器的overflow: hidden裁剪，避免产生不可控的滚动空间。

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