图片按比例缩放js

JavaScript015

图片按比例缩放js,第1张

<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){

flag=true

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

}

ImgD.alt=image.width+"×"+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

}

ImgD.alt=image.width+"×"+image.height

}

}

}

//-->

</script>

调用的时候

<img onload="javascript:DrawImage(this,100,100)" src="" />

这个是把图片固定在宽和高各是100px,在这区间进行缩放。

有办法，只是IE6等比例缩放无效 因为这要使用max-width属性

2个问题

自动缩放 可以通过max-width和max-height来实现

垂直居中，给你一个思路，对于2个inline-block元素同时使用vertical-align:middle能够产生意想不到的效果，IE7可以通过zoom来模仿inline-block

自己动手去写一下吧，你就会明白

<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>