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

时间:2017-01-12 13:13:00

标签: html css css3

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

当我尝试对此图像使用border-radius时,会出现扭曲的边缘。

在这种情况下如何解决此问题?因为我无法替换没有空格的图像上的图像。

enter image description here

enter image description here

Snippet

3 个答案:

答案 0 :(得分:2)

如果您知道图像内部填充的确切高度,则可以创建一个使用图像作为容器上的背景图像的工作区。如果您将容器的大小设置为与“真实”图像大小完全相同,并正确定位背景图像,则可以在该容器上应用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/

答案 1 :(得分:2)

您可以尝试

&#13;
&#13;
.as-console-wrapper { max-height: 100% !important; top: 0; }
&#13;
img {
  border-radius: 20px;
}
&#13;
&#13;
&#13;

答案 2 :(得分:2)

以下是我的建议:

<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;

}