如何使用CSS裁剪图片周围的空白区域？

1. 用CSS直接裁剪空白区域 #

如果你清楚图片上下左右空白的比例或精确像素值，用clip-path就能快速裁剪掉空白，只保留内容区域：

/* 示例：上下左右各裁掉20%的空白，根据你的图片实际情况调整数值 */
img.content-cropped {
  clip-path: inset(20% 20% 20% 20%);
}

要是知道空白的精确像素，直接写像素值就行，比如inset(80px 40px 80px 40px)，这样img就只会显示中间的内容部分，视觉尺寸和内容完全匹配。

2. 用容器+object-fit隐藏空白 #

给img套一个和内容实际尺寸一致的容器，通过容器隐藏空白区域：

<div class="img-wrapper">
  <img src="your-image-path.png" alt="目标图片">
</div>

.img-wrapper {
  /* 设置为你图片内容的实际宽高 */
  width: 580px;
  height: 420px;
  overflow: hidden;
}
.img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

容器会把超出自身尺寸的空白部分切掉，img在容器内自动适配显示内容。

3. 预处理图片（最省心的方案） #

直接用图片编辑工具（比如Photoshop、GIMP，或者免费在线工具）把图片四周的空白裁剪掉，保存成新的图片文件。之后在项目里引用处理后的图片，不用写额外CSS，img的尺寸自然和内容一致。

内容的提问来源于stack exchange，提问作者Vinícius Kayo de Souza