css - 我可以在不知道图像宽度的情况下在 CSS 中裁剪图像的边缘吗？

Question

是否可以在不事先知道图像大小的情况下使用 CSS 从图像的所有侧面修剪一组像素？

我有一堆带有内置边框的图像——所以，边框是图像本身的一部分。我想摆脱这个边框而不必编辑所有图像。我想使用 CSS 裁剪图像每一侧的 2px。

我见过不同的选项，但它们似乎都需要知道图像的宽度才能将其放入 CSS 中。但是，图像都是不同的大小，所以我不能，例如，硬设置一个比实际宽度小 4px 的宽度，然后摆弄overflow.

标签： css

Answer 1

与... clip-path_calc

这里我使用 4px 但你可以使用任何值...只要边框宽度已知。

注意您不需要知道图像大小。

div {
  display: inline-block;
  background: red;
  margin: 4px;
}

img {
  display: block;
}

.clipped {
  clip-path: polygon( 4px 4px, calc(100% - 4px) 4px, calc(100% - 4px) calc(100% - 4px), 4px calc(100% - 4px))
}

<div>
  <img src="http://www.fillmurray.com/284/196" alt="">
</div>

<div>
  <img src="http://www.fillmurray.com/284/196" class="clipped">
</div>