关于网页图片自适应大小的讨论

图片自适应大小在网页平面是一个长久的话题

偶就经常碰到这方面的问题曾经用过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调用耗费图片资源,于是就有了下面的修改

++++++++++++++++++++++++++++++++++++++++++++++++++++以下是引用片段：

//图片自适应大小并绝对居中对齐

//函数 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";

}

}

} 在一个父ID中的所有IMG元素进行图片自适应缩放

优化了算法 四例对比

真正做到了多比例图片 图片自适应(类似WINDOW,缩略图的效果)

OK 到此为止(上例 多用于产品图片展示)