我有一個圓形div,它包裹了一個圖像和兩個其他div。問題是它顯示在這個div周圍的灰色邊框。問題出現在所有瀏覽器chrome和firefox上。我曾嘗試把瀏覽器的CSS供應商前綴,面具,但沒有結果。用邊框半徑隱藏的溢出在圖像上顯示一個奇怪的灰色邊框
我不能使用:
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/
謝謝@Ramis – 2015-02-10 23:27:03
不客氣! ;) – 2015-02-10 23:28:29
嘿,對不起,但現在的問題是,圖像沒有在正確的縱橫比。它在1:1。它應該是16:9,因爲它是YouTube視頻幀 – 2015-02-10 23:45:00