Brave/Chrome 浏览器中图像周围不需要的边框半径角

如何解决Brave/Chrome 浏览器中图像周围不需要的边框半径角

我尝试在带有 border-radius: 5px; 的容器内显示一个简单的图像。但是在角落处似乎有一个细边框的轮廓（您需要仔细查看下图）。我怎样才能避免这些角边界？

.cover {
    margin: 1em;
    padding: 1em;
}
.image-wrapper {
    height: 15em;
    width: 15em;
    overflow: hidden;
    background-color: black;
    border-radius: 15px;
}
img {
    height: 100%;
    width: auto;
}

<div class="cover">
    <div class="image-wrapper">
        <img
            src="https://images.pexels.com/photos/316466/pexels-photo-316466.jpeg"
        />
    </div>
</div>

是的，如果我删除 background-color: black;，它就会消失。但是我需要保留 background-color 并且我还需要 img { height: 100%; width: auto; } 来保持纵横比并处理图像尺寸太薄或太宽等情况。

在搜索其他类似问题时，我只能找到 Safari 的问题/回复。我正在使用 Brave 浏览器。

解决方法

使用掩码代替溢出会得到更好的结果（两者的行为相同，因为两者都隐藏外面的东西）

.cover {
  margin: 1em;
  padding: 1em;
}

.image-wrapper {
  height: 15em;
  width: 15em;
  background-color: black;
  border-radius: 15px;
  -webkit-mask:linear-gradient(#fff 0 0);
}

img {
  height: 100%;
  width: auto;
}

body {
  background:pink;
}

<div class="cover">
  <div class="image-wrapper">
    <img src="https://images.pexels.com/photos/316466/pexels-photo-316466.jpeg" />
  </div>
</div>

<div class="cover">
  <div class="image-wrapper">
    <img src="https://picsum.photos/id/17/200/300" />
  </div>
</div>

,

很确定这是一个 webkit 错误，因为从 devtool 关闭并重新打开 borer-radius 修复了它。 一种可能的解决方法是不使用包装器并将 object-fit:cover 添加到图像以使其具有响应性。您也可以尝试 object-fit:contain，但这会产生黑色条纹。如果您愿意，可以从 Help>Report an Issue 发送 Chrome 错误报告。

编辑：没关系。显然，如果您上下滚动页面几次，它会自行修复，我认为它有效。

.cover {
    margin: 1em;
    padding: 1em;
}

img {
    border-radius: 15px;
    height: 100%;
    width: auto;
    height: 15em;
    width: 15em;
    overflow: hidden;
    background-color: black;
    border-radius: 15px;
    object-fit:cover;
}

<div class="cover">
    <div class="image-wrapper">
        <img
            src="https://images.pexels.com/photos/316466/pexels-photo-316466.jpeg"
        />
    </div>
</div>

,

这个 hack 似乎有效。

background-clip: content-box;
padding: 1px;

background-clip: content-box; 比 -webkit-mask

有更好的浏览器支持

.cover {
    margin: 1em;
    padding: 1em;
}
.image-wrapper {
    height: 15em;
    width: 15em;
    overflow: hidden;
    background-color: black;
    border-radius: 15px;
    background-clip: content-box;
    padding: 1px;
}
img {
    height: 100%;
    width: auto;
}

<div class="cover">
    <div class="image-wrapper">
        <img src="https://images.pexels.com/photos/316466/pexels-photo-316466.jpeg" alt="hello" />
    </div>
</div>

,

这可能是因为 background-color: black;。尝试删除它，如果它不起作用，请添加 border: none;

,

我猜它可能是你的图像，在我的笔记本电脑上经历了相同的格式，我的图像从未提供圆角边框，但添加边框：无；到您的代码并查看结果