css - 是否可以使用 CSS 仅基于 img.class(不添加容器)来裁剪图像的边缘？

Question

大量图像在图像文件本身中应用了各种彩色边框。

有没有一种方法可以使用 CSS 有效地裁掉它们的边缘，以便可以通过样式将新的、一致的边框应用于所有这些图像？

<p class="score-title"> 
<img class="cover-image" .../>
...
</p>

我想从每张图片的所有四个边上剪掉 5 个像素，然后添加我自己的 CSS 边框。

5 像素足以移除所有不同的边界，而不会明显地切入图像。

Answer 1

是的。将 border 属性与 box-sizing:border-box 一起使用 - 这将用新的 css 定义的边框替换图像的外部像素。

.cover-image {
  border: 5px solid green;
  box-sizing: border-box;
}

<img class="cover-image" src="http://lorempixel.com/400/200/food" alt="" />