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图片自适应容器的主要内容,如果未能解决你的问题,请参考以下文章