signed

QiShunwang

“诚信为本、客户至上”

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

2021/6/3 14:17:39   来源:
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=https://www.jb51.net/uploadfile/2013/0803/20130803034531502.jpg"
alt="自动缩放后的效果"

width="100"

height="100"

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

/></body></html>
您可能感兴趣的文章:
  • js实现固定显示区域内自动缩放图片的方法
  • js同比例缩放图片的小例子
  • THINKPHP+JS实现缩放图片式截图的实现
  • javascript 实现的完全兼容鼠标滚轴缩放图片的代码
  • js实现头像图片切割缩放及无刷新上传图片的方法
  • js实现鼠标滚轮控制图片缩放效果的方法
  • JS网页图片按比例自适应缩放实现方法
  • JS实现按比例缩放图片的方法(附C#版代码)