如何通过CSS裁剪/隐藏图片多余边距以实现目标展示效果？

以下几种方法可以快速实现裁剪或隐藏图片的蓝色边框，达到你想要的效果：

方法一：容器包裹+object-fit裁剪 #

用一个容器限定显示尺寸，让图片在容器内居中覆盖，自动裁掉四周边框：

/* 容器样式 */
.img-wrapper {
  width: 900px; /* 设置为去掉边框后的目标宽度 */
  height: 900px; /* 对应目标高度 */
  overflow: hidden;
}
/* 图片样式 */
.img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center; /* 保证图片主体居中显示 */
}

使用时把图片放进这个容器即可。

方法二：clip-path精准裁剪 #

如果知道蓝色边框的具体宽度，用clip-path直接切掉边框区域。假设四周边框各占50px：

img {
  clip-path: inset(50px 50px 50px 50px); /* 顺序：上、右、下、左，根据实际数值调整 */
}

这种方法无需额外容器，直接给图片加样式就行。

方法三：背景图方式裁剪 #

把图片设为元素背景，通过背景定位和容器尺寸控制显示范围：

.bg-image {
  width: 900px;
  height: 900px;
  background-image: url('你的图片地址');
  background-position: center;
  background-size: cover;
}

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