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

更新时间：2013年08月06日 15:56:40 作者：

当网页加载一个尺寸比较大的图片时，往往会把一个网页撑的变形，页面变得很难看，于是我们就想到了用JS去控制超出一定范围的图片

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中this在各个场景下的指向
这篇文章主要介绍了浅谈JS中this在各个场景下的指向，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-08-08
CSS+Table图文混排中实现文本自适应图片宽度（超简单+跨所有浏览器）
最近在为学乐网开发图片显示功能时遇到一个问题：在一个table中有两行，上边显示图片（大小随机），下边显示对图片的相关说明（文字长度随机）
2009-02-02
解决layer.msg 不居中 ifram中的问题
今天小编就为大家分享一篇解决layer.msg 不居中 ifram中的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
javascript中的this详解
avaScript 中的 this 关键字，深入浅出的分析其在不同情况下的含义，形成这种情况的原因以及 Dojo 等 JavaScript 工具中提供的绑定 this 的方法。可以这样说，正确掌握了 JavaScript 中的 this 关键字，才算迈入了 JavaScript 这门语言的门槛。
2014-12-12
JS中toFixed()方法四舍五入的精度问题详解
最近在做项目的时候,遇到了有四舍五入保留两位的需求,当时不假思索的直接使用了js原生的toFixed方法,结果出现了问题,这篇文章主要给大家介绍了关于JS中toFixed()方法四舍五入精度问题的相关资料,需要的朋友可以参考下
2021-10-10
javascript 关闭IE6、IE7
通过javascript关闭浏览器的时候，“一般”会弹出系统的默认提示框，提示用户是否关闭浏览器，这可以通过javascript解决，但是IE6，IE7解决的办法是不一样的
2009-06-06
uni-app入门页面布局之window和tabbar详解
每个页面按照结构可以分成三部分:window page tabbar.其中window和tabbar一般比较固定，page是平常业务开展的主要载体，根据业务需求进行页面配置。下面主要讲一下window和tabbar，感兴趣的朋友跟随小编一起看看吧
2022-11-11
写了个XML+Tree无穷树js版
写了个XML+Tree无穷树js版...
2007-09-09
js的form表单提交url传参数(包含+等特殊字符)的两种解决方法
下面小编就为大家带来一篇js的form表单提交url传参数(包含+等特殊字符)的两种解决方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-05-05
详解webpack-dev-server使用方法
这篇文章主要介绍了详解webpack-dev-server使用方法,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09