让图片均匀缩小的必要性与解决方案
在制作网站的过程中,经常会碰到这样的问题,想用程序将某个图片均匀的缩小,并且动态的实现,这样做的目的一是为了实现某个功能或界面,二是为了让图片不变形,比如原来宽是200px,高是100px,均匀缩小后,当宽为100px时,高自动就变成50px。

什么情况下需要通过程序来缩小图片呢?比如网站的缩短图片,因为这些图片都是从后台由客户上传上去的,有大有小,不好一概而论,也无法知道客户什么时候上传,上传多大的,什么尺寸的,所以这个时候就需要有程序控制,自动均匀缩小,还有一种情况,就是叫客户直接做成缩略图这么大的,这显然也不行,因为点击后就无法看到大图了,因而非常有必要。

一个更重要的情况就是当用Ipad或是手机访问时,如果不用程序对图片进行控制处理的话,图片就会把网页撑开,此时就需要把图片均匀缩小,这样又不变形,又能让用户看到合适的满意的图片,因为更多的情况是手机与电脑共享一个数据库,客户在后台上传文字与图片混排时,这时的图片肯定是很大的,至少用手机打开时会大,所以均匀缩小非常有必要。这时候使用js可以实现这个功能,直接上解决方案:

当宽度大于380px的时候,就自动调用该js,或是高度超过500px时自动调用该js(其实这个高度有时用不着设置的,无论是电脑,或是手机,或是IPad更多关注的是宽度,宽度太宽,网页会被撑开,高度太高,那倒没有什么,反正浏览是一切正常。)

<script language="JavaScript" type="text/JavaScript">
function DrawImage(ImgD){
var image=new Image();
var iwidth = 380; //当宽度大于380px时等比例缩小
var iheight = 500; //定义允许图片高度,当高度大于500px时等比例缩小
image.src=ImgD.src;
if(image.width>0 && image.height>0){
flag=true;
if(image.width/image.height>= iwidth/iheight){
if(image.width>iwidth){
ImgD.width=iwidth;
ImgD.height=(image.height*iwidth)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height;
}
else{
if(image.height>iheight){
ImgD.height=iheight;
ImgD.width=(image.width*iheight)/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height;
}
}
}</script>

那究竟如何使用呢?咱们上代码,上完后就会明白了。见附图一:


在一个网页上插入一个图片,结果代码是这样的:<div><img src="upload/abc.jpg" border="0"></div>

如果想让这个图片动态的显示大小,可以这样弄:<div><img src="upload/abc.jpg" border="0" onload="DrawImage(this);"></div>

然后就OK了,就这样简单。

运行一下,见附图二:



下一条:对网站进行优化这句话有几层意思
网站套餐/客户案例/公司优势/域名主机/企业邮箱/网站推广/关于我们/返回首页
版权所有:南京希丁哥网络信息服务有限公司