jquery圖片不完全按比例自動縮小的簡單代碼

更新時間：2013年07月29日 12:05:01 作者：

開發(fā)前期用自動生產(chǎn) 固定大小的圖片進行顯示，發(fā)現(xiàn)不能滿足，在前期的時候把保存了原圖，現(xiàn)在只能顯示原圖，原圖由于上傳時候沒有做任何限制所有要使用圖片不完全按比例縮小，下面是代碼

jQuery(document).ready(function()
{ 
/* 圖片不完全按比例自動縮小*/ 
$(window).load(function(){$('#content div.thumbnail img').each(function(){ var x = 200; 
//填入目標圖片寬度
 var y = 140; 
//填入目標圖片高度
 var w=$(this).width(), h=$(this).height();
//獲取圖片寬度、高度 
if (w > x) { 
//圖片寬度大于目標寬度時 
var w_original=w, h_original=h; h = h * (x / w);
 //根據(jù)目標寬度按比例算出高度 w =x;
 //寬度等于預定寬度 if (h < y) { 
//如果按比例縮小后的高度小于預定高度時
 w = w_original * (y /h_original); 
//按目標高度重新計算寬度 h = y;
 //高度等于預定高度 
} 
}
$(this).attr({width:w,height:h}); }); }); });

您可能感興趣的文章:

相關(guān)文章

jquery限定文本框只能輸入數(shù)字即整數(shù)和小數(shù)
限定文本框只能輸入數(shù)字即整數(shù)和小數(shù)，在某些特殊情況下還是比較實用的，下面有個不錯的示例，通過jquery來簡單實現(xiàn)下
2013-11-11
通過jQuery打造支持漢字,拼音,英文快速定位查詢的超級select插件
jQuery 超級select 插件 v3.0.0.0插件支持漢字、拼音、英文快速定位查詢的超級select插件?？煞较蜴I、tab 鍵快速選擇。
2010-06-06
jQuery ajax MD5實現(xiàn)用戶注冊即時驗證功能
這篇文章主要為大家詳細介紹了JQuery AJAX MD5實現(xiàn)用戶注冊即時驗證功能,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-10-10
jQuery插件FusionCharts繪制的3D環(huán)餅圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件FusionCharts繪制的3D環(huán)餅圖效果,結(jié)合完整實例形式分析了jQuery使用FusionCharts載入xml格式數(shù)據(jù)繪制圖形的操作步驟與相關(guān)實現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
2017-04-04
jquery.pager.js分頁實現(xiàn)詳解
這篇文章主要為大家詳細介紹了jquery.pager.js分頁的實現(xiàn)方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-07-07
基于jquery的9行js輕松實現(xiàn)tab控件示例
tab控件的實現(xiàn)方法有很多，在本文為大家詳細介紹下如何通過9行js實現(xiàn)簡單的tab控件，感興趣的朋友不要錯過
2013-10-10
jQuery實現(xiàn)點擊按鈕滾動元素功能詳解
這篇文章主要為大家介紹了jQuery實現(xiàn)點擊按鈕滾動元素功能詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-06-06
jQuery事件用法實例匯總
這篇文章主要介紹了jQuery事件用法實例匯總,對事件的綁定及各類事件的用法做了較為詳盡的實例分析,有很好的借鑒價值,需要的朋友可以參考下
2014-08-08
利用jquery正則表達式在頁面驗證url網(wǎng)址輸入是否正確
這篇文章主要介紹了關(guān)于利用jquery正則表達式在頁面驗證url網(wǎng)址輸入是否正確的相關(guān)資料，文中給出了完整的示例代碼，對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。
2017-04-04
jQuery EasyUI API 中文文檔 - ComboTree組合樹
jQuery EasyUI API 中文文檔 - ComboTree組合樹，需要的朋友可以參考下。
2011-10-10