如何利用clip-path去除图片多余部分，让容器仅识别裁剪区域？

你遇到的问题本质是：clip-path仅对元素做视觉裁剪，不会改变元素的盒模型尺寸，所以容器还是会保留原图的布局空间。下面是几种无需负边距的可行方案：

方案1：用object-fit + object-position适配img标签 #

先根据你的inset(70% 22% 11% 22%)计算保留区域的比例：

• 宽度保留：100% - 22%（左裁剪）- 22%（右裁剪）= 56%
• 高度保留：100% - 70%（上裁剪）- 11%（下裁剪）= 19%

直接把容器设置为这个比例的尺寸，再通过object-position把图片的目标区域移到可视范围内：

.clipimage {
  width: 20%;
  /* 按裁剪比例计算高度：20% * 保留高度比例 / 保留宽度比例 */
  height: calc(20% * 19 / 56);
  overflow: hidden;
}
.clipimage img {
  width: 100%;
  height: auto;
  /* 对应inset的裁剪方向反向定位：左移22%，上移70% */
  object-position: 22% 70%;
  object-fit: none; /* 保持原图尺寸，只显示定位后的区域 */
  box-shadow: inset 0 0 10px #000000;
}

方案2：将图片作为容器背景图（最直接控制布局） #

把图片从img标签转为容器的背景图，用background-position定位到裁剪区域，容器直接设置为裁剪后的大小：

.clipimage {
  width: 20%;
  height: calc(20% * 19 / 56);
  background-image: url('https://images.pexels.com/photos/19577082/pexels-photo-19577082/free-photo-of-city-skyline-at-dusk.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
  background-position: 22% 70%; /* 对应左、上裁剪值 */
  background-size: auto 100%; /* 保证高度铺满容器，宽度自动适配 */
  box-shadow: inset 0 0 10px #000000;
}

对应的HTML可以简化为：

<div class="redsquare">
  <p>This paragraph before clip image.</p>
  <div class="clipimage"></div>
</div>

方案3：overflow:hidden + 图片偏移 #

容器设置为裁剪后的尺寸，通过位移把图片的目标区域移到容器内，用overflow:hidden隐藏多余部分：

.clipimage {
  width: 20%;
  height: calc(20% * 19 / 56);
  overflow: hidden;
  position: relative;
}
.clipimage img {
  position: absolute;
  top: -70%; /* 上移70%，让裁剪后的顶部区域对齐容器顶部 */
  left: -22%; /* 左移22%，让裁剪后的左侧区域对齐容器左侧 */
  width: 100%;
  height: auto;
  box-shadow: inset 0 0 10px #000000;
}

这些方案都直接将容器尺寸设置为裁剪后的实际大小，布局时容器只会占据裁剪后的空间，完全不需要依赖负边距这类强制手段。

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