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

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=http://www.jb51.net/uploadfile/2013/0803/20130803034531502.jpg"
alt="自动缩放后的效果"

width="100"

height="100"

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

/></body></html>

赞 (0)

相关推荐

  • JS实现按比例缩放图片的方法(附C#版代码)

    本文实例讲述了JS实现按比例缩放图片的方法.分享给大家供大家参考,具体如下: js版本: function resizeImage(obj, MaxW, MaxH) { var imageObject = obj; var state = imageObject.readyState; if(state!='complete') { setTimeout("resizeImage("+imageObject+","+MaxW+","+MaxH+&

  • JS网页图片按比例自适应缩放实现方法

    JS网页图片按比例自适应缩放实现方法

    用户上传照片,照片的尺寸未知:需要生成一个预览,这个预览图要根据提供给用户预览的区域自应用,并且居中:如果图片太大,需要按比例缩放.如下图. 瞄了一下,居中可以用 text-align:center; 来实现.而按比例缩放,利用预设 <img /> 的 width .height 属性解决不了.因为用户图片可能是很长的,也可能是很宽的.在线上想了一下他们的关系,按条件来判断是这样的: if(实际宽度 > 预览最大宽度) {    缩放宽度 = 预览最大宽度} if(实际高度 > 预

  • js实现头像图片切割缩放及无刷新上传图片的方法

    本文实例讲述了js实现头像图片切割缩放及无刷新上传图片的方法.分享给大家供大家参考.具体如下: fname:后台接收时用的名字, 必填 funstr:开始上传执行的函数, 默认无 funbak:上传成功后的回调函数, 必填 furl:上传地址: 默认当前form的提交页面 注意:上传地址和当前地址必须为同意域名否则回调函数获取不到 上传成功发回的地址.   a.php: $path='a.jpg'; move_uploaded_file($_FILES['uimg']['tmp_name'],$

  • js同比例缩放图片的小例子

    复制代码 代码如下: function DrawImage(ImgD, FitWidth, FitHeight) {    var image = new Image();    image.src = ImgD.src;    if (image.width > 0 && image.height > 0) {        if (image.width / image.height >= FitWidth / FitHeight) {            if (

  • THINKPHP+JS实现缩放图片式截图的实现

    THINKPHP+JS实现缩放图片式截图的实现

    作者:杨鑫奇 原始链接:http://www.cnblogs.com/scotoma/archive/2010/03/05/1679477.html 今晚TP论坛的一位大哥加我了,说也遇到这个方面的问题,呵呵!想想其实很多东西都遇到了,是不是应该分享出来呢?其实自己的很多东西都是别人那来的,取之于网络用之于网络!只有大家多分享,才能够提高! 实现方式 上传图片 -- 保存并显示图片 -- JS获取缩略图参数 -- 提交位置参数 -- 图片缩放保存类处理图片 -- 保存截取的图片--更新数据库 -

  • js实现鼠标滚轮控制图片缩放效果的方法

    本文实例讲述了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/xhtm

  • javascript 实现的完全兼容鼠标滚轴缩放图片的代码

    javascript 实现的完全兼容鼠标滚轴缩放图片的代码

    code如下: 复制代码 代码如下: /*! *author:sohighthesky *blog:http://www.cnblogs.com/sohighthesky *date:2010-2-4 */ var zooming=function(e){ e=window.event ||e; var o=this,data=e.wheelDelta || e.detail*40,zoom,size; if(!+'\v1'){ zoom = parseInt(o.style.zoom) ||

  • js实现固定显示区域内自动缩放图片的方法

    本文实例讲述了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">

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

    js等比例缩放图片,这个功能非常实用,当网页加载一个尺寸比较大的图片时,往往会把一个网页撑的变形,页面变得很难看,于是我们就想到了用JS去控制超出一定范围的图片,我们以稳定页面布局,本代码段就是完成了此功能,而且代码非常简洁,效果很好. 复制代码 代码如下: <html><head><title>等比例缩放图片</title><script>function DrawImage(ImgD,iwidth,iheight){ //参数(图片,允许的宽

  • 微信小程序 图片等比例缩放（图片自适应屏幕）

    微信小程序 图片等比例缩放（图片自适应屏幕）

    微信小程序 图片等比例缩放 早上在论坛上看到有人写了关于图片等比例缩放的文章,只是判断了图片宽是否大于屏幕宽.我之前在做Android的时候也会遇到图片等比例缩放的问题.应该是用图片宽高比和屏幕宽高比做判断.做个笔记. 老规矩,先上图. 1.图片高宽比小于屏幕高宽比 2.图片高宽比大于屏幕高宽比 3.这种其实也是图片高宽比小于屏幕高宽比,但是高宽都大于屏幕高宽.所以不能简单用高宽来判断,应该是用高宽比判断后做缩放. 上代码: 1.index.wxml <!--index.wxml--> <

  • JavaScript实现网页图片等比例缩放实现代码及调用方式

    在处理网页图片时,特别是一些图片列表的应用里面,很难保证图片统一大小,直接设置图片大小又会导致图片拉伸,造成图片模糊,本文介绍的代码可以在图片加载完成后自动按比例调整图片大小. Javascript: 复制代码 代码如下: < script language="javascript" type="text/javascript"> < !-- // 说明:用 JavaScript 实现网页图片等比例缩放 // 整理:http://www.CodeB

  • javascript 指定区域内图片等比例缩放实现代码 脚本之家整合版 原创

    javascript 指定区域内图片等比例缩放实现代码 脚本之家整合版 原创

    我们整合篇,欢迎转载. 复制代码 代码如下: function controlImg(ele,w,h){ var c=ele.getElementsByTagName("img"); for(var i=0;i<c.length;i++){ var w0=c[i].clientWidth,h0=c[i].clientHeight; var t1=w0/w,t2=h0/h; if(t1>1||t2>1){ c[i].width=Math.floor(w0/(t1>

  • jQuery实现等比例缩放大图片让大图片自适应页面布局

    在布局页面时,有时会遇到大图片将页面容器"撑破"的情况,尤其是加载外链图片(通常是通过采集的外站的图片).那么本文将为您讲述使用jQuery如何按比例缩放大图片,让大图片自适应页面布局. 通常我们处理缩略图是使用后台代码(PHP..net.Java等)根据大图片生成一定尺寸的缩略图,来供前台页面调用,当然也有使用前台javascript脚本将加载后的大图强行缩放,变成所谓的缩略图,这种方法不可取.但是,针对网站内容页,如本站文章详情页,如果需要加载一张很大的图片时,为了防止"

  • JS图片等比例缩放方法完整示例

    本文实例讲述了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>

  • jQuery实现按比例缩放图片的方法

    本文实例讲述了jQuery实现按比例缩放图片的方法.分享给大家供大家参考,具体如下: 做网站的时候,相信有很多朋友都会遇到图片过大,导致页面撑开变形的问题,如果强制设置width,height,图片则会因为强制变形而走样.在这里我介绍一种简单的按比例缩放图片的方法. 对于一堆图片 <img src="1.jpg" border="1"></img> <img src="2.jpg" border="1&qu

  • jquery实现图片等比例缩放以及max-width在ie中不兼容解决

    上次用原生的JavaScript实现的图片等比例缩放,max-width和max-height在ie6中不兼容问题,今天用jQuery实现了这些问题 jQuery部分代码 复制代码 代码如下: <script type="text/javascript"> $(document).ready(function(){ var maxWidth=$(".imgBox").width(); $("img").each(function(){

  • 图片按比例缩放函数

    以下是程序代码: <script language="JavaScript"><!--//图片按比例缩放var flag=false;function DrawImage(ImgD,iwidth,iheight){    //参数(图片,允许的宽度,允许的高度)    var image=new Image();    image.src=ImgD.src;    if(image.width>0 && image.height>0){  

随机推荐