Hi 各位css/html的先進們,小妹又來了~
這次問題是想要做有自適應作用的圖片框, 可是完全沒有反應...
再麻煩各位撥空回答, 感激不盡~
另外,不知道為什麼 貼上html的語法後 語法都會消失 , 所以這裡的div標籤前面我都空了一格, 像這樣 < div>
Html如下:
< div class="imgbox">
< div class="imgbox-inner">
< div class="image" style="background-image:url(https://i.imgur.com/qzaFDFD.jpg)">
< /div>
< /div>
css如下:
.imgbox{
border:2px solid #000;
width:40%;
overflow:hidden;
position:absolute;
}
.imgbox-inner{
width:100%;
padding-top:75%;
height:0;
position:relative;
}
.imgbox.image{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
background-repeat:no-repeat;
background-size:cover;
background-position:center;
}