用边框半径隐藏的溢出在图像上显示奇怪的灰色边框

Question

我有一个圆形 div，它包含一个图像和另外两个 div。问题是该 div 周围显示灰色边框。所有浏览器 chrome 和 firefox 均存在该问题。我尝试放置浏览器 css-vendor-prefixes、掩码，但没有结果。

我不能使用：

img {
  width: 100%;
  height: 100%;
  border-radius: 120px;
}

因为图像的宽高比不正确。它是在1:1. 它应该打开，16:9因为它是 YouTube 视频帧。

<div class="video_wrap">
    <div class="views">1651</div>
        <img src="http://img.youtube.com/vi/-NschES-8e0/hqdefault.jpg">
    <div class="title">o'najr</div>
</div>

.video_wrap {
    width: 240px;
    height: 240px;
    border-radius: 120px;
    overflow: hidden;
}

.views, .title {
    position: relative;
    background: #fff;
    height: 50px;
    color: #f8008c;
    text-align: center;
    line-height: 50px;
}

.views {
    top: 0px;
    z-index: 2;
}

.title {
    top: -100px;
}

.video_wrap img {
    height: 100%;
    position: relative;
    top: -50px;
}

小提琴http://jsfiddle.net/h3198LfL/

Answer 1

您可以删除border-radius:120px并.video_wrap添加以下内容到您的img

img{
   width:100%;
   border-radius: 120px;
}

片段

img{
   width:100%;
   border-radius: 120px;
}

.video_wrap {
  width: 240px;
  height: 240px;
  overflow: hidden;
}
img {
  width: 100%;
  border-radius: 120px;
}
.views,
.title {
  position: relative;
  background: #fff;
  height: 50px;
  color: #f8008c;
  text-align: center;
  line-height: 50px;
}
.views {
  top: 0px;
  z-index: 2;
}
.title {
  top: -100px;
}
.video_wrap img {
  height: 100%;
  position: relative;
  top: -50px;
}