1. 程式人生 > 其它 >js圖片自適應容器

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"}) // } } }