导读:建站文章

图片自适应大小在网页平面是一个长久的话题 偶就经常碰到这方面的问题曾经用过JS CSS 等办法来解决,但是还是不能很好的解决问题,今天偶就来总结下 =============================== 我需要解决的图片自适应的条件是 图片的比例大小 都不同,却把这图片放在一个的方框里,这个方框可大 可小,按照人的意愿来设定这个方框的比例 现在我要做的是要让这些图片自适应这个方框,最长 不超过方框的长,最宽不超过方框的宽 =============================== 下面的方法有些错误，但大体思路是这样 +++++++++++++++++++++++++++++++++++ 以下是引用片段： //图片自适应大小并绝对居中对齐 //函数 fImgageAuto //方法 读取原始图片的长高,按缩放比率进行缩放 //缺点 图片量大 似乎图片就图不完 不能完全显示 //原因不名,偶估计是onload太多的原因 function fImageAuto(nID,nMaxWidth,nMaxHeight) { var imageArr=document.getElementById(nID); var imageWidthRate,imgHeightRate; imageWidthRate=imageArr.offsetWidth/nMaxWidth; imageHeightRate=imageArr.offsetHeight/nMaxHeight; if(imageWidthRate >=imageHeightRate) { imageArr.style.width=nMaxWidth+"px"; imageArr.style.height=imageArr.offsetHeight+"px"; imageArr.style.marginTop=(nMaxHeight-imageArr.offsetHeight)/2+"px"; }else if(imageWidthRate imageArr.style.height=nMaxHeight+"px"; imageArr.style.width =imageArr.offsetWidth+"px"; imageArr.style.marginLeft=(nMaxWidth-imageArr.offsetWidth)/2+"px"; } return true; } 上例中我最后都是用 .style 来确认图片最后的长宽, 有人认为我CSS有点偏激,说用.width;.height来得更直接 +++++++++++++织梦后台模板+++++++++++++++++++++++++++++++++++++++ 上例BUG: 基本算法错误,但中心思想没有偏离,作用域小,如果网页中图片集有N个 那就要有N个JS调用耗费图片dede手机模板资源,于是就有了下面的修改 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 以下是引用片段： //图片自适应大小并绝对居中对齐 //函数 fImgageAuto //能在同一个ID下对单独图片自适应外框大小 //Ver 2.1 最后更新07/08/27 by Amilim function fImageAuto(nID,nMaxWidth,nMaxHeight) { var objParentID =document.getElementById(nID); var objImg =objParentID.getElementsByTagName("img"); var nImgNewRate =0; var nImgOldRate =nMaxWidth/nMaxHeight; for (i=0;i nImgNewRate =objImg[i].offsetWidth/objImg[i].offsetHeight; if (nImgNewRate >=nImgOldRate) { objImg[i].style.height =nMaxWidth/nImgNewRate +"px"; objImg[i].style.width =nMaxWidth +"px"; objImg[i].style.marginTop =Math.round((nMaxHeight-nMaxWidth/nImgNewRate)/2) +"px"; }else{ objImg[i].style.width =nMaxHeight*nImgNewRate +"px"; objImg[i].style.height =nMaxHeight +"px"; objImg[i].style.marginLeft =(nMaxWidth-nMaxHeight*nImgNewRate)/2 +"px"; } } }

关键词标签: 网页 自适应 大小