如何去除图像周围不需要的白色边框？

Question

在制作一个黑色背景的图片旋转木马时，我遇到了一个问题，在特定的浏览器中，图片周围出现了神秘的白色边框。

我已经尝试将盒子阴影设置为0，移除边框，并添加与图像背景颜色相同的边框；但是这些尝试都没有导致任何改变。

当前的CSS：

.card-carousel-cell img {
    padding: 0;
    margin: 0 0 10px 0;
    width: 110px;
    height: 110px;
    border-radius: 10px;
    background-color: #252525;
    display: block;
}

有没有一种方法可以在各种浏览器中一致地解决这个问题？

- user5047873

---

你正在使用 Owl Carousel 吗？ - Salim Djerbouh

请问你能否添加这些边框图片的代码示例？这会让找到解决方案变得更容易。 - Daan Seuntjens

@CaddyDZ 我正在使用Flickity，但是即使不使用任何库也会出现这个问题。 - user5047873

@DaanSeuntjens 我已经在问题中添加了所有的图像样式，没有其他代码会影响img标签。 - user5047873

我缺少一些HTML或类似的东西来在不同的浏览器中检查这些输出，我们无法像这样测试您的代码。 - Daan Seuntjens

一定要删除图像标记 <a href=""><img /></a> 周围的空格。 - mplungjan

Answer 1

尝试将图像放在具有透明背景的 div 中。 .img-container 是具有透明背景的 div，.myimg 是图像。点击此处查看 jsfiddle 示例。

.img-container {
  background-color: transparent;
  width: 200px;
  height: 200px;
}
.myimg {
  border-radius: 20px;
  width: 100%;
  height: 100%;
}

- Telepresence