js控制圖片等比例縮放程式碼
圖片在應用中難免要根據實際情況進行大小調整,但是這種大小調整通常並不是無原則的,例如圖片等比例縮放就是要遵守的重要原則之一,否則就會出現圖片變形現象,下面就分享一段圖片等比例縮放的程式碼。
一.js程式碼如下:
[JavaScript] 純文字檢視 複製程式碼function DrawImage(ImgD,FitWidth,FitHeight){ var image=new Image(); image.src=ImgD.src; if(image.width>0 && image.height>0) { if(image.width/image.height>= FitWidth/FitHeight) { if(image.width>FitWidth) { ImgD.width=FitWidth; ImgD.height=(image.height*FitWidth)/image.width; } else { ImgD.width=image.width; ImgD.height=image.height; } } else { if(image.height>FitHeight) { ImgD.height=FitHeight; ImgD.width=(image.width*FitHeight)/image.height; } else { ImgD.width=image.width; ImgD.height=image.height; } } } }
二.圖片中的使用:
[JavaScript] 純文字檢視 複製程式碼<img src="test.jpg" />
相關文章
- JavaScript圖片簡單等比例縮放JavaScript
- 圖片等比例縮放裁切詳解
- 移動端圖片等比例縮放實踐
- Vue3等比例縮放圖片元件Vue元件
- css實現圖片按寬等比例縮放不變形CSS
- CSS實現圖片等比例縮小不變形CSS
- js 滾輪控制圖片縮放大小和拖動JS
- SwiftUI圖片處理(縮放、拼圖)SwiftUI
- JavaScript DOM元素長寬等比例縮放JavaScript
- android imageview 縮放檢視圖片AndroidView
- js上傳圖片壓縮JS
- js圖片壓縮推薦JS
- Js實現任意位置縮放圖片,深入理解背後原理JS
- opencv 圖片幾何變換-縮放OpenCV
- Android 圖片處理之固定視框中的等比例壓縮Android
- 開源圖片工具箱(Img Toolbox) 格式轉換 新增水印 圖片壓縮 圖片裁剪 圖片旋轉 圖片縮放
- 滑鼠懸浮圖片實現縮放效果
- css中圖片按照長寬比縮放CSS
- QLabel顯示圖片 ,並實現縮放
- JS—圖片壓縮上傳(單張)JS
- 自定義圖片裁剪之雙指縮放思路
- 《你不知道的 CSS》之等比例縮放的盒子CSS
- VS+Qt+Halcon——顯示圖片,實現滑鼠縮放、移動圖片QT
- 圖片純前端JS壓縮的實現前端JS
- css設定圖片固定寬高,按比例縮放CSS
- .NetCore實現圖片縮放與裁剪 - 基於ImageSharpNetCore
- ugui 縮放圖片使圖片的四個角和四邊保持原樣UGUI
- js控制專輯圖片旋轉效果JS
- JS中通過指定大小來壓縮圖片JS
- 直播原始碼網站,js處理圖片變形、方向、壓縮等原始碼網站JS
- 圖片響應式縮放,已中心為原點裁剪
- 縮放圖片至固定大小,尺寸不足以0填充
- Glide 原始碼分析(一):圖片壓縮IDE原始碼
- js實現移動端圖片預覽:手勢縮放, 手勢拖動,雙擊放大...JS
- 純前端實現 PNG 圖片壓縮 | UPNG.js前端JS
- 踩坑!填坑!NodeJS環境使用GraphicIMagicK裁切、縮放圖片NodeJS
- BMP格式圖片縮放及在LCD螢幕展示練習
- HarmonyOS NEXT應用開發之圖片縮放效果實現
- 圖片縮放(不裁剪,按原來比例計算寬高)