js图片自适应容器

Posted 石头记1

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js图片自适应容器相关的知识,希望对你有一定的参考价值。

            //实际图片的宽高
            var hei = $("#curtanDiv")[0].height;
            var wid = $("#curtanDiv")[0].width;
            //容器的宽高
            var czhei = parseInt($("#BankChange").css(\'height\')) - 35;
            var czwid = parseInt($("#BankChange").css(\'width\'));
            if(wid > czwid){//当宽超出
                if(hei > czhei){//宽和高都超出
                    if(wid > hei){//宽>高,横版
                        $("#curtanDiv").css({"width":czwid+"px","height":"auto"})
                    }else{//高>宽,竖版
                        //竖版图,当修改高度后宽度仍超出
                        var temPic = $("#curtanDiv").css({"width":"auto","height":czhei+"px"});
                        var temwid = $("#curtanDiv")[0].width;
                        if(temwid > czwid){
                            $("#curtanDiv").css({"width":czwid+"px","height":"auto"})
                        }else{
                            $("#curtanDiv").css({"width":"auto","height":czhei+"px"});
                        }
                    }
                }else{//只有宽超出
                    $("#curtanDiv").css({"width":czwid+"px","height":"auto"})
                }
            }else{//宽不超出
                if(hei > czhei){//只有高超出
                    $("#curtanDiv").css({"width":"auto","height":czhei+"px"})
                }else{//宽和高都没超出
                    // if(wid > hei){//宽>高,横版
                    //     $("#img2").css({"width":"802px","height":"auto"})
                    // }else{//高>宽,竖版
                    //     $("#img2").css({"width":"auto","height":"502px"})
                    // }
                }
            }

 

以上是关于js图片自适应容器的主要内容,如果未能解决你的问题,请参考以下文章

图片裁剪自适应

如何用CSS使图片自适应显示宽度

轮播图js怎么设置图片自适应大小

支持鼠标滚轮图片自适应的焦点图代码等

CSS 图片自适应容器

图片自适应容器大小