我有一个圆形 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/ http://jsfiddle.net/h3198LfL/
你可以删除border-radius:120px
from .video_wrap
并将以下内容添加到您的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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)