调整浏览器窗口大小时如何实现图片自动裁剪而非整体缩放

需求梳理 #

• 图片填充整个section区块，区块宽度随浏览器窗口自适应
• 图片核心区域（示例中的船）尺寸始终保持固定，不会随窗口缩放整体缩小/放大
• 窗口宽度变化时，图片两侧非核心区域（示例中的树木部分）自动裁剪，核心区域始终居中显示

实现方案 #

方案1：object-fit 方案（优先推荐，代码最简洁） #

只需要给容器设置固定高度（和你要保留的核心区域高度一致），图片铺满容器后用object-fit: cover做裁剪，配合居中定位就能实现效果，代码如下：

.image-section {
  width: 100%;
  /* 这里的高度改成你需要的核心区域固定高度，比如核心内容对应高度是500px就填500px */
  height: 500px;
  overflow: hidden;
}
.image-section img {
  width: 100%;
  height: 100%;
  /* 让图片等比缩放覆盖整个容器，超出容器的部分自动裁剪 */
  object-fit: cover;
  /* 锁定图片中心为对齐基准，保证核心的船始终在可视区域内 */
  object-position: center;
}

对应HTML结构：

<section class="image-section">
  <img src="你的本地图片路径" alt="风景图">
</section>

小提示：如果你的核心内容不在图片正中心，只需要调整object-position的属性值就行，比如核心内容在图片偏上位置，可以改成center 20%，就能锁定对应位置的内容不偏移

这个方案兼容所有现代浏览器，IE11及以上版本都可以正常运行，不需要额外写JS逻辑，性能最好。

方案2：背景图方案（适配低版本浏览器） #

如果需要兼容IE10及更早的浏览器，可以把图片作为容器背景实现，效果完全一致：

.image-section {
  width: 100%;
  height: 500px; /* 和核心区域固定高度保持一致 */
  background: url("你的本地图片路径") center no-repeat;
  background-size: cover;
}

对应HTML只需要单个容器标签：

<section class="image-section"></section>

日常开发优先选第一个方案就行，代码量小维护方便，只有需要兼容IE10及更早版本浏览器的时候，再考虑用背景图的方案。 #

实现效果说明 #

两种方案都能完全满足需求：

• 窗口宽度较大时，图片完整展示中心船+两侧树木内容，船的尺寸和设定的固定高度匹配
• 窗口宽度缩小时，容器高度不变，图片始终保持等比，两侧超出容器宽度的树木部分自动被裁剪，中心船的尺寸、位置完全不会变化
• 不会出现整张图随窗口等比缩小、核心内容变小的问题

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