全屏图片等比例缩放

最新推荐文章于 2022-04-07 22:01:09 发布

ly115176236

最新推荐文章于 2022-04-07 22:01:09 发布

阅读量2.2k

点赞数

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/ly115176236/article/details/9214639

版权

javascript 专栏收录该内容

11 篇文章

订阅专栏

/*
        大图自动等比例缩放。
    */
    var bxsliderImgs = $(".bxslider").add(".bxsliderIndex").find("img");
    var bxsliderImgResize = function(){
        bxsliderImgs.each(function(i, item){

            var b_w = $(window).width();
            var b_h = $(window).height();
            var ratio = 1680/1050;
            if(b_w/b_h > ratio){
                var img_w = b_w;
                var img_h = img_w / ratio;
                $(item).width(img_w);
                $(item).height(img_h);
            }else{
                var img_h = b_h;
                var img_w = img_h * ratio;
                $(item).width(img_w);
                $(item).height(img_h);
            }

        })
    }
    
    bxsliderImgResize();
    
    var resizeTimer = null;
    $(window).on('resize', function () {
        if (resizeTimer) {
            clearTimeout(resizeTimer)
        }
        //通过定时器来减少重绘的频率
        resizeTimer = setTimeout(function(){
            bxsliderImgResize();
        }, 400);
    });