全屏图片等比例缩放

Bertha 。 2022-01-16 10:37 288阅读 0赞

/*
            大图自动等比例缩放。
        */
        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);
        });

发表评论取消回复

表情：

评论列表（有 0 条评论，288人围观）

还没有评论，来说两句吧...

相关阅读

相关等比例缩放多个图片

最新做了一个等比例缩放多个图片，保证所有图片宽高相等并不失真的功能，现将代码粘贴出来。 import javax.imageio.ImageIO; impor

淩亂°似流年/ 2023年10月10日 18:40/ 0 赞/ 19 阅读

相关图片等比例自适应缩放

图片的父级元素宽度写成百分比形式，图片的宽高取100%即可 <li class="desktops_item"> <img clas

忘是亡心i/ 2023年01月08日 12:26/ 0 赞/ 249 阅读

相关 php等比例缩放图片

/ 处理图片尺寸【等比例缩小或放大】 @param $filePath【进行处理图片本地地址】 @param $saveImage【处理后保存地址】 @para

秒速五厘米/ 2022年11月26日 15:52/ 0 赞/ 188 阅读

相关 CSS控制图片等比例缩放

图片最大宽度为1000px 超过1000px自动等比例缩放至1000px .imgs { max-width: 1000px;//非I

你的名字/ 2022年07月12日 01:15/ 0 赞/ 209 阅读

相关 CSS控制图片等比例缩放

img{ width: auto; height: auto; max-width: 100%;

亦凉/ 2022年05月21日 01:54/ 0 赞/ 230 阅读

相关【移动端布局】让图片保持等比例缩放（实用）

原文出处：[https://www.aliyun.com/jiaocheng/639739.html][https_www.aliyun.com_jiaocheng_63973

短命女/ 2022年04月17日 03:39/ 0 赞/ 582 阅读

相关全屏图片等比例缩放

/ 大图自动等比例缩放。 / var bxsliderImgs = $(".bxslider").add(".b

Bertha 。/ 2022年01月16日 10:37/ 0 赞/ 289 阅读

相关 Dip 缩放比例

double DipToZoom(_In_ int dip) { double dRet = 1.0; switch (dip)

àì夳堔傛蜴生んèń/ 2021年12月22日 10:27/ 0 赞/ 252 阅读

相关网页全屏缩放代码

定义一个点击事件，方法体中加入以下代码即可实现，Vue、html都可使用 if (!document.fullscreenElement &&

谁借莪１个温暖的怀抱￠/ 2021年09月23日 10:20/ 0 赞/ 326 阅读

相关 vue中实现图片全屏缩放预览

基于photoswipe的vue图片全屏缩放预览插件：vue-photo-preview 说明 1.简化了photoswipe的默认设置 2.取消了图片需设定尺寸的

女爷i/ 2021年07月25日 21:20/ 0 赞/ 716 阅读