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

1.不指定Img尺寸，保持原始尺寸

< !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>
</head>
< body >
   < div >
     < h3 >这里我们要显示一张图片 </h3>
     < p >这张图片本身大小是683*1024px大小的,如果我们不指定img的width和height就会按照原始尺寸显示。 </p>
     < img src ="images/pic (1).jpg" alt="" />
   </div>
</body>
</html>

 

这种办法当然是比较好的，但是需要编辑人员在上传图片之前对图片根据需要的尺寸裁切才能不会出现图片过大撑开页面的问题。

或者页面容器尺寸固定，图片裁切到指定的宽高比。

 

 

如果为img指定width和height中任意一个，另一个留空，浏览器也可以为我们等比缩放图片显示。

这种不太适合容器宽高比固定的情况

 

< !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>
</head>
< body >
   < div >
     < h3 >这里我们要显示一张图片 </h3>
     < p >这张图片本身大小是683*1024px大小的,如果我们不指定img的width和height就会按照原始尺寸显示。 </p>
     < img src ="images/pic (1).jpg" alt ="" height="200" />
   </div>
</body>
</html>

这里我们假如容器的高度固定为200px，每个图片高度设为容器的200px高度，会有什么问题呢，如果大图的话，问题不是很大，但是如果很小的图放大到200px;那就很模糊了。于是有人想到了max-height属性，比如max-height:200px;那么如果图片大于200px高度，那么就取到200px，如果小则保留原样(但会有填不满容器，出现白边的问题)，需要提到的是ie无法识别max-height需要用到css表达式Hacks。

 

如果设置了overflow:hidden;图片超出的部分就会隐藏显示。

 

但是实际中有些图片是用户上传的，一般不能对图片实现处理。

于是有些网站提供在线的图片裁切工具。

 

要求用户多此一举的对图片进行修改是不太人性化的。

可是又要满足要求怎么办呢？

 

我们看看如何用js实现裁切图片:

看下demo程序:

< !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>
</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 ="" width="200" />
     </div>
     < div id ="demo2" class ="img_mask" >
       < img src ="images/pic (4).jpg" alt ="" height="200" />
     </div>    
   </div>
</body>
</html>

 

上面是手动的，图片选了2张，一张横向比较长的，一个是高度比较高的，下面我们用js来自动截取:

 

< !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>