基于jquery实现等比缩放图片

前端技术 2023/09/02 JavaScript

基于jquery的图片尺寸调整

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
});

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

本文地址:https://www.stayed.cn/item/3990

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见,何事秋风悲画扇。