已知原图宽高，如何用CSS裁剪图片并消除裁剪后空白区域？

问题说明 #

• 未裁剪的元素效果：
• 需求：仅保留图片高度20%至60%的区域，给元素应用了以下CSS：

  clip-path: polygon(0% 20%, 100% 20%, 100% 60%, 0% 60%);
  

• 裁剪后效果：，目标区域周围存在空白（灰色背景为便于观察添加），不符合预期
• 期望效果：，曾通过硬编码实现但不具备通用性，询问已知原图宽高时能否仅用CSS实现。

可行实现方法 #

已知原图宽高的情况下，纯CSS完全可以实现需求，核心是裁剪后消除原元素的空白区域，以下是两种高效方案：

方案1：clip-path + transform + 容器限制 #

利用裁剪路径保留目标区域，再通过位移和容器截断消除空白：

1. 给图片添加外层容器，容器高度设为原图高度的40%（即60%-20%的占比）
2. 图片应用clip-path裁剪出目标区域，再通过transform: translateY(-20%)将裁剪区域上移，填满容器
3. 容器设置overflow: hidden截断超出部分

示例代码（假设原图高度为500px）：

.img-wrapper {
  height: 200px; /* 500px * 40% = 200px */
  overflow: hidden;
}

.img-wrapper img {
  width: 100%;
  height: auto;
  clip-path: polygon(0% 20%, 100% 20%, 100% 60%, 0% 60%);
  transform: translateY(-20%);
}

方案2：object-fit + object-position（更简洁） #

无需裁剪路径，直接通过定位显示目标区域：

1. 容器尺寸设为目标区域的宽高（宽度与原图一致，高度为原图的40%）
2. 图片设置object-fit: none保持原始尺寸，再用object-position: 0 -20%将图片向上偏移20%，刚好显示20%-60%的区域

示例代码：

.img-wrapper {
  width: 原图宽度值;
  height: 原图高度值 * 40%;
  overflow: hidden;
}

.img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: none;
  object-position: 0 -20%;
}

两种方案都能精准实现你要的效果，其中方案2代码更简洁，适合已知原图尺寸的场景。

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