基于jquery實(shí)現(xiàn)等比縮放圖片

更新時(shí)間：2014年12月03日 16:03:15 投稿：hebedich

這篇文章主要給大家分享了一段基于jquery實(shí)現(xiàn)等比縮放圖片的代碼，非常的實(shí)用，這里推薦給大家

基于jquery的圖片尺寸調(diào)整

resize.js

$(window).bind("load", function() {

    // IMAGE RESIZE

    $('#product_list img').each(function() {

        var maxWidth = 120;

        var maxHeight = 120;

        var ratio = 0;

        var width = $(this).width();

        var height = $(this).height();

        if(width > maxWidth){

            ratio = maxWidth / width;

            $(this).css("width", maxWidth);

            $(this).css("height", height * ratio);

            height = height * ratio;

        }

        var width = $(this).width();

        var height = $(this).height();

        if(height > maxHeight){

            ratio = maxHeight / height;

            $(this).css("height", maxHeight);

            $(this).css("width", width * ratio);

            width = width * ratio;

        }

    });

    //$("#contentpage img").show();

    // IMAGE RESIZE

});

代碼很簡潔，使用起來也很簡單，小伙伴們直接使用即可

您可能感興趣的文章:

相關(guān)文章

jquery制作隨機(jī)彈跳的小球特效
這篇文章主要介紹了jquery制作隨機(jī)彈跳的小球特效,需要的朋友可以參考下
2015-02-02
jQuery插件HighCharts繪制2D餅圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件HighCharts繪制2D餅圖效果,結(jié)合完整實(shí)例形式分析了jQuery使用HighCharts插件繪制餅圖效果的操作步驟與相關(guān)實(shí)現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
2017-03-03
JQuery index()方法使用代碼
做了很多種方式的選擇項(xiàng)卡切換。沒有一個(gè)確定的方法。程序的魅力就在于一個(gè)[結(jié)果]有無數(shù)種[方式]去實(shí)現(xiàn)。
2010-06-06
jQuery 源碼分析筆記(6) jQuery.data
data模塊是一個(gè)比較有趣的功能，可以為任意的Element 添加額外的數(shù)據(jù)。而且處理了循環(huán)引用和內(nèi)存泄漏的問題。API非常簡單，就是.data(key, value)用來保存，.data(key)用開查詢數(shù)據(jù)。
2011-06-06
jquery radio 操作代碼
jquery radio 操作代碼，需要的朋友可以參考下。
2011-03-03
jQuery實(shí)現(xiàn)頁面下拉100像素出現(xiàn)懸浮窗口的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)頁面下拉100像素出現(xiàn)懸浮窗口的方法,涉及jQuery事件監(jiān)聽及針對(duì)頁面元素的判定與動(dòng)態(tài)操作技巧,需要的朋友可以參考下
2016-09-09
MVC Ajax Helper或Jquery異步加載部分視圖
這篇文章主要介紹了MVC Ajax Helper或Jquery異步加載部分視圖的相關(guān)資料,需要的朋友可以參考下
2015-11-11
jQuery動(dòng)態(tài)添加 input type=file的實(shí)現(xiàn)代碼
有時(shí)候需要在頁面上允許用戶上傳多個(gè)文件，個(gè)數(shù)由用戶自己決定，個(gè)數(shù)多了也可以刪除，使用jQuery可以很簡單的實(shí)現(xiàn)這個(gè)功能
2012-06-06
jQuery插件實(shí)現(xiàn)非常實(shí)用的tab欄切換功能【案例】
這篇文章主要介紹了jQuery插件實(shí)現(xiàn)非常實(shí)用的tab欄切換功能,涉及jQuery事件響應(yīng)及頁面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2019-02-02
一款基jquery超炫的動(dòng)畫導(dǎo)航菜單可響應(yīng)單擊事件
。這款導(dǎo)航菜單，初始時(shí)頁面中間一個(gè)按鈕，單擊按鈕，菜單從左側(cè)飛入頁中。再次單擊按鈕，導(dǎo)航飛入左側(cè)消息
2014-11-11