JavaScript等比例缩放图片控制超出范围的图片

软件发布|下载排行|最新软件

当前位置:首页IT学院IT技术

JavaScript等比例缩放图片控制超出范围的图片

  2020-05-13 我要评论
js等比例缩放图片,这个功能非常实用,当网页加载一个尺寸比较大的图片时,往往会把一个网页撑的变形,页面变得很难看,于是我们就想到了用JS去控制超出一定范围的图片,以稳定页面布局,本代码段就是完成了此功能,而且代码非常简洁,效果很好。
复制代码 代码如下:

<html><head><title>等比例缩放图片</title><script>function
DrawImage(ImgD,iwidth,iheight){ //参数(图片,允许的宽度,允许的高度)
var
image=new Image(); image.src=ImgD.src;
if(image.width>0
&& image.height>0){ 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;
}
}else{
if(image.height>iheight){
ImgD.height=iheight;
ImgD.width=(image.width*iheight)/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
}
}
}
</script></head><body><img

src=//www.qb5200.com/uploadfile/2013/0803/20130803034531502.jpg"
alt="自动缩放后的效果"

width="100"

height="100"

onload="javascript:DrawImage(this,80,80)"

/></body></html>

Copyright 2022 版权所有 软件发布 访问手机版

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们