html - 如何将边界半径应用于带填充的图像？

Question

我的图像顶部和底部带有白色填充。请看附件。

当我尝试对这个图像使用 border-radius 时，我得到了扭曲的边缘。

在这种情况下，我该如何解决这个问题？因为我无法在没有空白的情况下替换图像。

Snippet

Answer 1

如果您知道图像内填充的确切高度，则可以创建一个将图像用作容器上的背景图像的变通方法。如果容器的大小与“真实”图像大小完全一样，并且背景图像的位置正确，则可以在该容器上应用 border-radius。

.imagecontainer {
  background: url(http://nafantano.com/image/cache/catalog/toys/2017/img_8356____by_nafantano-d9aagdh-399x287.jpg) no-repeat 0 -10px;
  border-radius: 20px;
  display: inline-block;
  height: 230px;
  width: 300px;
}

<a href="#" class="imagecontainer"></a>

https://jsfiddle.net/tc29nedy/5/