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

图片自适应大小在网页平面是一个长久的话题
偶就经常碰到这方面的问题曾经用过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 到此为止(上例多用于产品图片展示)

NEWS

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