<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>複製程式碼
圖片實現寬高比
相關文章
- CSS實現背景圖片固定寬高比自適應調整CSS
- CSS 圖片固定長寬比實現高度自適應CSS
- css如何實現未知寬高div中圖片垂直水平居中效果CSS
- android 修改圖片的寬高Android
- CSS實現圖片寬度自適應CSS
- 如何使用純CSS實現固定寬高比div?CSS
- css中圖片按照長寬比縮放CSS
- 實現固定寬高比盒子的幾種方案的總結
- css 實現圖片寬度自適螢幕,高度與寬度成固定比例CSS
- css設定圖片固定寬高,按比例縮放CSS
- elementUI upload 對圖片的寬高做校驗UI
- js拖動實現左右圖片對比效果JS
- Unity從圖片的位元組資料裡面獲取圖片的寬和高Unity
- app直播原始碼,Vue獲取URL圖片的寬高APP原始碼Vue
- Python 獲取圖片格式及畫素寬高資訊Python
- css實現圖片按寬等比例縮放不變形CSS
- matlab實現調整圖片的對比度Matlab
- 圖片縮放(不裁剪,按原來比例計算寬高)
- 給圖片設定了固定寬高還會被壓縮
- 成品直播原始碼,JAVA獲取圖片的寬、高和大小原始碼Java
- 直播軟體原始碼,Vue獲取URL圖片的寬高原始碼Vue
- CSS平鋪背景圖片實現百分比圖表CSS
- javascript獲取圖片的真實寬度和高度JavaScript
- 實現圖片預覽
- 實現圖片縮放
- JAVA實現圖片裁剪Java
- iOS開發-Masonry約束寬高比iOS
- APP開發者利器!騰訊雲“永珍圖片”實現圖片上傳下載率高達99.9%APP
- 短視訊直播系統,個人主頁背景圖片自適應寬高
- canvas實現圖片馬賽克Canvas
- 圖片懶載入實現
- vue實現圖片預覽Vue
- php實現圖片旋轉PHP
- php實現pdf轉圖片PHP
- 圖片輪播元件實現元件
- JNI實現圖片壓縮
- 圖片模糊效果實現(RenderScript)
- javascript實現圖片滾動JavaScript