html - 隐藏有边框半径的溢出在图像上显示一个奇怪的灰色边框

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

fiddle http://jsfiddle.net/h3198LfL/

Answer 1

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

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

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