如何使用填充将border-radius应用于图像？

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/

Answer 2

您可以尝试

＆＃13;

＆＃13;

.as-console-wrapper { max-height: 100% !important; top: 0; }

＆＃13;

img {
  border-radius: 20px;
}

＆＃13;

＆＃13;

＆＃13;

Answer 3

以下是我的建议：

<div class="image hovereffect">
                <a href="#">
                <img class="img-responsive" src="https://theimgurl" id="featured_55">
 </a></div>

在css中使用溢出：隐藏图像类和图像img需要一个margin-top：-10。

.image {
  width:300px;
  height: 250px;
  border-radius:20px;
  overflow:hidden;

  }

.image img {
margin-top:-10px;

}