我有一个嵌套在父div中的image元素。父div有圆角，图像应该适应这些。如果图像由于某种原因没有加载，应该显示默认的背景颜色。这是一般设置：

.parent {
  border-radius: 10px;
  overflow: hidden;
}

.child {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: red;
}

<div class="parent">
  <img src="https://via.placeholder.com/150" class="child" />
</div>

我希望图像填充整个容器，而不是让背景中的任何红色显示出来，但是角落看起来像这样：

正如你所看到的，在圆角处有一条细细的红线。这在Chrome和Firefox中会发生。我如何消除这一点并使图像正确填充角落？