图片大小自动缩放js代码（图片大小自动缩放js代码是什么）

本文目录一览：

• 1、怎么用js实现图片的缩小？
• 2、jS控制图片的放大和缩小?
• 3、求一个简单的点击图片放大缩小的JS代码
• 4、如何利用JS或者CSS样式来自动调整图片大小
• 5、js实现图片滚轮、按钮缩放大小，图片旋转，图片拖拽

怎么用js实现图片的缩小？

一般来说，实现图片的放大缩小功能都用到了比较大的封装插件，特别是以jQuery插件居多，而实际上单纯实现对原图本身的放大缩小，用简单几行原生JS代码就可以做到。在今天分享的这个实例中，点击放大按钮不松鼠标，图片会不断的逐渐放大，当然也可以点一下放大一点，点击缩小按钮则反之，有需要的朋友可以考虑收藏备用哦

以下为全部代码：

html

    head

        meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /

        titlejavascript控制图片缩小或者放大/title

    /head

    body

        script type=”text/javascript”

            var oTime;

            function changeSize(id,action){

             var obj=document.getElementById(id);

             obj.style.zoom=parseInt(obj.style.zoom)+(action==’+’?+10:-10)+’%’;

             oTime=window.setTimeout(‘changeSize(\”+id+’\’,\”+action+’\’)’,100);

            }

            document.onmouseup=function(){

             window.clearTimeout(oTime);

            }

        /script

        div style=”height:350px; overflow: auto;”

        img id=”headImg” src=”

        button onmousedown=”changeSize(‘headImg’,’+’);” onmouseup=”window.clearTimeout(oTime);”放大/button

        button onmousedown=”changeSize(‘headImg’,’-‘);” onmouseup=”window.clearTimeout(oTime);”缩小/button

    /body

/html

jS控制图片的放大和缩小?

图片按比例缩放

function DrawImage(Img,WIDTH,HEIGHT){

var image=new Image();

image.src=Img.src;

width=WIDTH;//预先设置的所期望的宽的值

height=HEIGHT;//预先设置的所期望的高的值

if(image.widthwidth||image.heightheight){//现有图片只有宽或高超了预设值就进行js控制

w=image.width/width;

h=image.height/height;

if(wh){//比值比较大==宽比高大

//定下宽度为width的宽度

Img.width=width;

//以下为计算高度

Img.height=image.height/w;

}else{//高比宽大

//定下宽度为height高度

img.height=height;

//以下为计算高度

Img.width=image.width/h;

}

}

}

img src=”xxxx” onload=javascript:DrawImage(this,290,215);

求一个简单的点击图片放大缩小的JS代码

1、准备好需要用到的图标。

2、新建html文档。

3、书写hmtl代码。div id=allbox    div id=boxhome        img style=”WIDTH: 107px; BOTTOM: 5px; HEIGHT: 176px; LEFT: 10px” id=imgSmallLeft class=imgBorder onClick=”clearInterval(autoplay);moveD(‘l’);”    。

4、书写并添加js代码。script src=”js/ntes_jslib_1.x.js”/scriptscript src=”js/zzsc.js”/script。

5、代码整体结构。

6、查看效果。

如何利用JS或者CSS样式来自动调整图片大小

js版和css版自动按比例调整图片大小方法，分别如下：

titlejavascript图片大小处理函数/title

script language=Javascript

var proMaxHeight = 150;

var proMaxWidth = 110;

function proDownImage(ImgD){

      var image=new Image();

      image.src=ImgD.src;

      if(image.width0  image.height0){

      var rate = (proMaxWidth/image.width  proMaxHeight/image.height)?proMaxWidth/image.width:proMaxHeight/image.height;

    if(rate = 1){   

     ImgD.width = image.width*rate;

     ImgD.height =image.height*rate;

    }

    else {

                          ImgD.width = image.width;

                          ImgD.height =image.height;

                  }

      }

}

/script

/head

body

img src=”999.jpg” border=0 width=”150″ height=”110″  onload=proDownImage(this);   /

img src=”room.jpg” border=0 width=”150″ height=”110″ onload=proDownImage(this);   /

/body

纯css的防止图片撑破页面的代码，图片会自动按比例缩小：

style type=”text/css”

.content-width {MARGIN: auto;WIDTH: 600px;}

.content-width img{MAX-WIDTH: 100%!important;HEIGHT: auto!important;width:expression(this.width  600 ? “600px” : this.width)!important;}

/style

div class=”content-width”

  pimg src=”/down/js/images/12567247980.jpg”//p

  pimg src=”/down/js/images/12567247981.jpg”//p

/div

js实现图片滚轮、按钮缩放大小，图片旋转，图片拖拽

div class=”upload-img-box” ref=”moveWrap”

div class=”show-box” ref=”rotate” @mousedown=”moveImg” @mousewheel.prevent=”rollImg($event,)”

img :src=”singleList.fileImgUrl” class=”uploadimg” ref=”img” :style=”{transform:’scale(‘+multiples/100+’) rotate(‘+rotate +’deg)’}”/

/div

div class=”img-plus” @click=”toBIgChange()”span class=”tip”放大/span/div

div class=”img-minus” @click=”toSmallChange()”span class=”tip”缩小/span/div

div class=”img-rotate” @click=”toRotate()”span class=”tip”旋转/span/div

/div