网页开发中如何按屏幕尺寸裁剪图片而非调整大小避免横向滚动

核心思路 #

利用flex布局分配容器空间，配合overflow: hidden裁剪超出的图片部分，不需要修改原图尺寸，也不会触发横向滚动条。

具体实现步骤 #

• 第一步：给顶部区域外层容器设置flex布局，避免宽度溢出

.top-container {
  display: flex;
  width: 100%;
  box-sizing: border-box; /* 避免内边距、边框撑宽容器 */
}

• 第二步：给右侧窄栏设置固定宽度，禁止被挤压变形

.right-sidebar {
  width: 200px; /* 替换为你实际需要的窄栏宽度 */
  flex-shrink: 0;
}

• 第三步：给左侧图片的父容器设置规则，自动占满剩余空间，超出部分直接裁剪

.img-wrapper {
  flex-grow: 1;
  overflow: hidden;
}

• 第四步：给图片设置展示规则，保持原图比例和尺寸不变形，可自定义裁剪对齐方向

.img-wrapper img {
  display: block;
  /* 按需调整裁剪对齐方式：left center 代表保留图片左侧区域，裁剪右侧超出部分 */
  object-position: left center;
  /* 如果需要图片高度填满容器，可以补充以下两行 */
  /* height: 100%;
  width: auto; */
}

额外优化 #

如果要彻底避免页面出现横向滚动条，可以给全局添加规则：

body {
  overflow-x: hidden;
}

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