圖片實現寬高比

LJTin發表於2018-11-23

<div class='wrapper'>
    <img src='xxxxx.png' class='img'/>
</div>
//高(200px)比寬(640px)為31.25%
<style>
//第一種
.wrapper{
    overflow:hidden;
    height:0;//若設定百分比,高度會根據外部元素來計算
    width:100%;  
    padding-bottom:31.25%;//在高度為0的情況下,高度相對於寬度自動撐開31.25%,實現寬高比
}
.img{
    width:100%
}
//第二種
.wrapper{
    width:100%;  
    heihgt:31.25vw //高度相對於31.25的viewport,可能存在相容性
}
.img{
    width:100%
}
</style>複製程式碼


相關文章