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

问题描述

我有一个圆角div，用于包装图片和其他两个div。问题在于此div周围显示灰色边框。问题出在所有浏览器chrome和firefox上。我尝试将浏览器的CSS前缀，掩码添加到浏览器，但没有结果。

I have a round div which wraps an image and two other divs. The problem is that it is shown a grey border around this div. The problem is on all browsers chrome and firefox. I have tried putting browser css-vendor-prefixes, masks but no result.

我无法使用：

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

因为图像的纵横比不正确。它位于 1：1 中。它应该在 16：9 上，因为它是YouTube视频帧。

because the image is not in the correct aspect-ratio. It is in 1:1. It should be on 16:9 because it is a YouTube video frame.

<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

推荐答案

您可以从 .video_wrap border-radius：120px c>并将以下内容添加到您的 img

You could remove the border-radius:120px from .video_wrap and add following to your img

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

SNIPPET

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

这篇关于隐藏有边框半径的溢出在图像上显示出怪异的灰色边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！