ホームページ >ウェブフロントエンド >jsチュートリアル >jquery_jquery に基づいた画像の比例スケーリングの実装

jquery_jquery に基づいた画像の比例スケーリングの実装

WBOY
WBOYオリジナル
2016-05-16 16:29:211764ブラウズ

jquery に基づく画像の寸法調整

resize.js

复制代 代码如下:

$(window).bind("load", function() {
    // 画像のサイズ変更
    $('#product_list img').each(function() {
        var maxWidth = 120;
        var maxHeight = 120;
        var 比率 = 0;
        var width = $(this).width();
        var height = $(this).height();
    
        if(幅 > maxWidth){
            比率 = maxWidth / 幅;
            $(this).css("width", maxWidth);
            $(this).css("高さ", 高さ * 比率);
            高さ = 高さ * 比率;
        }
        var width = $(this).width();
        var height = $(this).height();
        if(高さ > maxHeight){
            比率 = maxHeight / 高さ;
            $(this).css("高さ", maxHeight);
            $(this).css("幅", 幅 * 比率);
            幅 = 幅 * 比率;
        }
    });
    //$("#contentpage img").show();
    // 画像のサイズ変更
});

代码很简洁,使用起来也很简单,小伙伴们直接使用即可

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。