zoukankan      html  css  js  c++  java
  • 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"})
                        // }
                    }
                }
  • 相关阅读:
    查看unity打来的包在手机上面查看日志
    Unity 打包出来动态加载图片丢失问题
    嵌套列表拖拽事件冲突问题
    游戏中实现鼠标拖尾效果
    2048
    面试知识点积累
    ARM处理器架构理论知识
    計算機網絡知識點總結:
    collection
    demo002.链表操作
  • 原文地址:https://www.cnblogs.com/liufeiran/p/14917142.html
Copyright © 2011-2022 走看看