联系我们
简单又实用的WordPress网站制作教学
当前位置:网站首页 > 网页前端技术 > 正文

基于jquery实现等比缩放图片 - Web前端

作者:98wpeu发布时间:2026-10-09分类:网页前端技术浏览:5


导读:基于JQuery的图片尺寸调整resize.JS复制代码代码如下:$(window).bind("load",function(){   //IMAGERESIZE  ...

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

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

标签:缩放图片Webjquery


网页前端技术排行
最近发表
网站分类
标签列表