動態等比例調整圖片大小的jQuery程式碼
有時候圖片的大小和尺寸是位置,如果上傳後,任由其自然伸展,很有可能導致網頁變形,所以要認為的控制圖片的尺寸,當然也不能夠太粗暴,直接定死圖片的尺寸,這樣可能會導致圖片變形,所以要進行等比例縮放,下面就是一段能夠實現此功能的程式碼。
程式碼如下:
[JavaScript] 純文字檢視 複製程式碼jQuery(window).load(function(){ jQuery("div.product_info img").each(function(){ DrawImage(this, 680, 1000); }); }); 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; } } } }
相關文章
- android程式碼中動態調整圖片的位置Android
- Excel如何調整圖片大小Excel
- kindeditor 上傳圖片 自動調整尺寸大小
- wps批量調整圖片大小
- 圖片大小調整工具:Image Resizer for MacMac
- Fast Resize for Mac(圖片大小調整工具)ASTMac
- jQuery滑鼠拖動調整數字大小jQuery
- 手動上傳圖片,怎麼調整大小和居中
- 圖片等比例縮放程式碼
- JS控制圖片顯示的大小(圖片等比例縮放)JS
- jquery獲取圖片的實際尺寸大小程式碼例項jQuery
- Linux 中如何使用 gThumb 批次調整圖片大小Linux
- js控制圖片等比例縮放程式碼JS
- 影片直播系統原始碼,CSS3如何調整背景圖片大小原始碼CSSS3
- jQuery限制上傳圖片格式和大小程式碼例項jQuery
- 【jquery前端開發】可調整的幻燈片(圖片輪播)薦jQuery前端
- jQuery實現的拖動調整表格td單元格的大小jQuery
- java調節圖片大小Java
- launchpad圖示大小怎麼調整?mac圖示調整大小方法介紹Mac
- jquery獲取圖片的真實大小jQuery
- js圖片等比例放大縮小例項程式碼JS
- JavaScript滑鼠拖動調整div大小JavaScript
- jQuery圖片預載入程式碼jQuery
- jQuery調整li元素順序程式碼例項jQuery
- ASP.NET C# 按原圖片大小等比例縮放生成縮圖ASP.NETC#
- html程式碼處理(如圖片、字型大小)HTML
- batchRESIZE for mac(批次調整圖片大小工具) v1.70啟用版BATMac
- 使用CSS禁止textarea文字框調整大小程式碼例項CSS
- jQuery實現的新聞列表上下移動調整順序程式碼例項jQuery
- 移動端圖片等比例縮放實踐
- 根據viewport的size自動調整fontsize大小View
- css3動態背景圖片程式碼例項CSSS3
- 批量調整視訊尺寸大小的方法,一鍵自動批量調整視訊
- 等比例縮放圖片 jsJS
- vs code 自動調整程式碼格式
- easysize_動態調整對話方塊控制元件位置和大小控制元件
- jquery外掛實現圖片可拖動的購物車程式碼jQuery
- 圖片尺寸大小自適應程式碼例項