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" />
相關文章
- 圖片等比例縮放程式碼
- 等比例縮放圖片 jsJS
- JS控制圖片顯示的大小(圖片等比例縮放)JS
- JS實現等比例縮放圖片JS
- js圖片等比例放大縮小例項程式碼JS
- 圖片等比例縮放裁切詳解
- JavaScript圖片簡單等比例縮放JavaScript
- 利用javascript實現圖片等比例縮放JavaScript
- 移動端圖片等比例縮放實踐
- Vue3等比例縮放圖片元件Vue元件
- 純JS實現圖片預覽與等比例縮放和居中JS
- css3背景圖片等比例縮放鋪滿全屏CSSS3
- css實現圖片按寬等比例縮放不變形CSS
- 按比例縮放圖片大小程式碼例項
- canvas實現的圖片縮放程式碼例項Canvas
- Android 圖片縮放Android
- 實現圖片縮放
- Node.js 對圖片進行裁切、縮放Node.js
- html 圖片按比例縮放HTML
- ASP.NET C# 按原圖片大小等比例縮放生成縮圖ASP.NETC#
- css img 等比例自動縮放CSS
- CSS實現圖片等比例縮小不變形CSS
- SwiftUI圖片處理(縮放、拼圖)SwiftUI
- 圖片操作系列 —(1)手勢縮放圖片功能
- HTML5 圖片縮放功能HTML
- Android:ImageView圖片縮放、居中AndroidView
- JavaScript DOM元素長寬等比例縮放JavaScript
- css3 實現圖片等比例放大與縮小CSSS3
- 動態等比例調整圖片大小的jQuery程式碼jQuery
- js 滾輪控制圖片縮放大小和拖動JS
- 根據比例縮放圖片的尺寸不變形程式碼例項
- 圖片比例縮放 不丟真的C#程式碼----努力加汗水哦C#
- android imageview 縮放檢視圖片AndroidView
- opencv 圖片幾何變換-縮放OpenCV
- 踩坑!填坑!NodeJS環境使用GraphicIMagicK裁切、縮放圖片NodeJS
- Magnifier.js - 支援滑鼠滾輪縮放的圖片放大鏡效果NifiJS
- Js實現任意位置縮放圖片,深入理解背後原理JS
- AlamofireImage 使用 – swift載入網路圖片,縮放圖片,生成圓形圖片Swift