用css删除内部图像边框

Question

我想用css删除图像中的这个边框，任何人都可以帮我解决这个问题。

图像边框是对象。

以下示例：

谢谢..！

Answer 1

您可以在modern browsers上使用clip-path，这样您就不需要添加包装并设置图片大小

示例：http://codepen.io/anon/pen/Gpoamy

img {
    -webkit-clip-path: inset(1px 1px 1px 1px);
    clip-path: inset(1px 1px 1px 1px)
}

在较旧的浏览器（和IE）上，您可以使用clip（虽然这需要指定矩形的大小和absolute位置）

否则，另一种方法，在浏览器中提供更广泛的支持，可能会使用outline（背景颜色相同）和负outline-offset - 实际上您将黑色边框与另一个重叠一。 （在Chrome和Firefox上测试过）。

示例：http://codepen.io/anon/pen/PPZvKe

img {
    outline: 1px #fff solid; 
    outline-offset: -1px;
}

当然，当图像中包含的边框宽度正好为1px时，这些示例才有效。如果图像边框较粗，则根据厚度

更改所有值

Answer 2

虽然我建议使用图像编辑器删除边框，但有一个CSS黑客：

负边距：

1. 将图像包装在容器内，然后设置overflow: hidden 定义尺寸（宽度和高度）。确保尺寸略小于图像尺寸。

2. 设置内部图像的负边距。边距值相对于边框的大小。

＆＃13;
＆＃13;
.borderless-img {
  width: 118px;
  height: 58px;
  overflow: hidden;
}
.borderless-img img {
  margin: -1px 0 0 -1px;
}
＆＃13;
<div class="borderless-img">
  <img src="http://i.stack.imgur.com/dcnpS.jpg" />
</div>
＆＃13;
＆＃13;
＆＃13;

缩放图片

此方法会增加图像的大小，可能会将其扭曲到很小的程度。它适用于您的解决方案，因为它会删除小边框。

缺点：不建议隐藏大部分图片。

＆＃13;
＆＃13;
.borderless-img {
  width: 118px;
  height: 58px;
  overflow: hidden;
}
.borderless-img img {
  transform: scale(1.055);
}
＆＃13;
<div class="borderless-img">
  <img src="http://i.stack.imgur.com/dcnpS.jpg" />
</div>
＆＃13;
＆＃13;
＆＃13;