关于图片缩小比例问题探讨

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > 
< html  xmlns ="http://www.w3.org/1999/xhtml" > 
< head > 
< title >避免图片缩放变形-"裁切遮罩法" </title> 
< style  type ="text/css" > 
#demo1,#demo2 
{ 
border:2px solid #900; 
} 
.img_mask 
{ 
width:200px; 
height:200px; 
overflow:hidden; 
} 
</style> 
< script  type ="text/javascript" > 
//图片裁切 
function imgClip(img,w,h) 
{ 
  var ratio=img.width/img.height;//图片长宽比 

  if(ratio<(w/h)) 
  { 
    //高度方向截取 
    img.width=w; 
    img.height=Math.round(w/ratio); 
    img.style.marginTop=(h-img.height)/2+"px"; 
  }else{ 
    //宽度方向截取 
    img.height=h; 
    img.width=Math.round(w*ratio); 
    img.style.marginLeft=(w-img.width)/2+"px";    
  }    
} 
</script> 
</head> 
< body > 
   < div > 
     < h3 >这里我们要显示一张图片 </h3> 
     < p >这张图片本身大小是683*1024px大小的,如果我们不指定img的width和height就会按照原始尺寸显示。 </p> 
     < div  id ="demo1"  class ="img_mask" > 
       < img  src ="images/pic (1).jpg" alt=""  /> 
     </div> 
     < div  id ="demo2"  class ="img_mask" > 
       < img  src ="images/pic (4).jpg" alt=""  /> 
     </div>    
     < script  type ="text/javascript" > 
    var imgs=document.getElementsByTagName('img'); 
    for(var i=0;i<imgs.length;i++) 
    if(imgs[i].parentNode.className=='img_mask') 
    { 
      imgClip(imgs[i],imgs[i].parentNode.clientWidth,imgs[i].parentNode.clientHeight); 
    } 
     </script> 
   </div> 
</body> 
</html>