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

图片自适应大小 在网页平面 是一个长久的话题
偶就经常碰到这方面的问题
曾经用过JS CSS 等办法来
但是还是不能很好的解决问题
今天偶就来总结下
===============================
=我需要解决的图片自适应的条件是 图片的比例大小
=都不同,却把这图片放在一个的方框里,这个方框可大
=可小,按照人的意愿来设定这个方框的比例
=现在我要做的是要让这些图片来适应这个方框,最长
=不超过方框的长,最宽不超过方框的宽
===============================
下面的一段代码是第一次构思
错了许多
连基本的算法都错
但却给了我一定解决这个问题的方向
+++++++++++++++++++++++++++++++++++

//图片自适应大小并绝对居中对齐 
//函数 fImgageAuto 
//方法 读取原始图片的长高,按缩放比率进行缩放 
//缺点 图片量大 似乎图片就图不完 不能完全显示 
//原因不名,偶估计是onload太多的原因 
//Ver 1.5 最后更新07/08/20 by Amilim 
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 <imageHeightRate){ 
  imageArr.style.height=nMaxHeight+"px"; 
  imageArr.style.width =imageArr.offsetWidth+"px"; 
  imageArr.style.marginLeft=(nMaxWidth-imageArr.offsetWidth)/2+"px"; 
  } 
  return true; 
}

上例中我最后都是用 <getElementID>.style 来确认图片最后的长宽,有人认为我CSS有点偏激,说用<getElementID>.width;.height来得更直接
不过淡然一笑吧 该消失的东西始终都会消失 叫我用惯了
++++++++++++++++++++++++++++++++++++++++++++++++++++
上例BUG:
基本算法错误,但中心思想没有偏离,作用域小
如果网页中图片集有N个 那就要有N个JS调用
耗费图片资源
于是就有了下面的修改
例子见 www.amilim.com/exam/imgAuto/index.asp
一些比例过大的图片缩放使得图片变形
++++++++++++++++++++++++++++++++++++++++++++++++++++

//图片自适应大小并绝对居中对齐 
//函数 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<objImg.length;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"; 
      } 
    } 
} 
</script>

在一个父ID中的所有IMG元素进行自适应缩放优化了算法 四例对比
真正做到了多比例图片 自适应缩放(类似WINDOW,缩略图的效果)