按比例縮放圖片大小程式碼例項
如果圖片的尺寸超出了要求的大小,可能導致網頁變形等情況,如果固定尺寸的話,那麼就有可能導致圖片變形,那麼網站也不會達到美觀的效果,下面是一段可能是圖片等比例縮放的程式碼例項供大家參考一下,程式碼來源於網路:
程式碼例項如下:
[JavaScript] 純文字檢視 複製程式碼<script type="text/javascript"> jQuery.fn.LoadImage=function(scaling,width,height,loadpic){ if(loadpic==null)loadpic="../img/loading.gif"; return this.each(function(){ var t=$(this); var src=$(this).attr("src") var img=new Image(); img.src=src; //自動縮放圖片 var autoScaling=function(){ if(scaling){ if(img.width>0 && img.height>0){ if(img.width/img.height>=width/height){ if(img.width>width){ t.width(width); t.height((img.height*width)/img.width); } else{ t.width(img.width); t.height(img.height); } } else{ if(img.height>height){ t.height(height); t.width((img.width*height)/img.height); } else{ t.width(img.width); t.height(img.height); } } } } } if(img.complete){ autoScaling(); return; } $(this).attr("src",""); var loading=$("<img alt=\"載入中...\" title=\"圖片載入中...\" src=\""+loadpic+"\" />"); t.hide(); t.after(loading); $(img).load(function(){ autoScaling(); loading.remove(); t.attr("src",this.src); t.show(); }); }) } $(window).load(function(){ $('#content img').LoadImage(true, 600,500,'img/loading.gif'); }); </script> </head> <body> <div id="content"><img src="img/1.jpg"/></div> </body> </html>
相關文章
- html 圖片按比例縮放HTML
- 根據比例縮放圖片的尺寸不變形程式碼例項
- 圖片等比例縮放程式碼
- js圖片等比例放大縮小例項程式碼JS
- canvas實現的圖片縮放程式碼例項Canvas
- js控制圖片等比例縮放程式碼JS
- JS控制圖片顯示的大小(圖片等比例縮放)JS
- css設定圖片固定寬高,按比例縮放CSS
- ASP.NET C# 按原圖片大小等比例縮放生成縮圖ASP.NETC#
- 等比例縮放圖片 jsJS
- 圖片縮放(不裁剪,按原來比例計算寬高)
- Android根據螢幕寬度,按比例縮放圖片Android
- 圖片尺寸大小自適應程式碼例項
- css實現圖片按寬等比例縮放不變形CSS
- canvas縮放div程式碼例項Canvas
- 【凌風雨寒】asp.net:圖片按比例縮放,可輸入引數設定初始大小ASP.NET
- javascript檢測上傳圖片大小程式碼例項JavaScript
- 圖片比例縮放 不丟真的C#程式碼----努力加汗水哦C#
- 圖片等比例縮放裁切詳解
- JavaScript圖片簡單等比例縮放JavaScript
- JS實現等比例縮放圖片JS
- html中背景圖按比例縮放全屏顯示HTML
- css禁止文字縮放程式碼例項CSS
- jQuery限制上傳圖片格式和大小程式碼例項jQuery
- 利用javascript實現圖片等比例縮放JavaScript
- 如何讓圖片按比例響應式縮放、並自動裁剪的css技巧CSS
- 圖片大小自適應手機螢幕程式碼例項
- jquery獲取圖片的實際尺寸大小程式碼例項jQuery
- 移動端圖片等比例縮放實踐
- 【轉載】如何讓圖片按比例響應式縮放、並自動裁剪的css技巧CSS
- 動態等比例調整圖片大小的jQuery程式碼jQuery
- UIImage 圖片處理:截圖,縮放,設定大小,儲存UI
- css圖片變黑白程式碼例項CSS
- 利用css切割圖片程式碼例項CSS
- css3背景圖片等比例縮放鋪滿全屏CSSS3
- 如何設定圖片高度固定,寬度可以根據比例縮放
- 隨機漂浮圖片廣告例項程式碼隨機
- javascript圖片預載入程式碼例項JavaScript