js代码修改图片大小（css调整图片大小代码）

今天给各位分享js代码修改图片大小的知识，其中也会对css调整图片大小代码进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、js 控制图片大小
• 2、jS控制图片的放大和缩小?
• 3、怎么用js改变div里面的图片大小
• 4、如何使用JS等比例改变显示图片的大小

js 控制图片大小

这种情况用CSS来控制最合适。例如你想让初始图片显示为100px*100px，则：

img src="images/pic.png" width="100" height="100" /

或者：

img src="images/pic.png" style="width:100px; height:100px" /

当页面中图片非常多，且要求每张图片的大小依据其父容器来固定怎么办？可以使用max-weight：

img {max-weight:100%;}

这样图片会自动缩放到和其父容器等宽。

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改变div里面的图片大小

你的div的结构是下面这种结构吗？

div

     img

/div

如果是的话，你先获取到div，

然后在div里获取img；

var aImg=document.getElementById("div's Id").getElementsByTagName('img');

for(var i=0;iaImg.length;i++){

      aImg[i].style.height="the height you want";

      aImg[i].style.width="the width you want";

}

如果你所说的图片是指div的background，那么你可以在CSS里面用：

background-size:50px 100px;（调整背景图片的大小）

background-repeat:no-repeat;（是否平铺，否）

/*也可以：*/

background-size:40%100%;（对背景图片进行拉伸）

当然用js的话也可以：

img.style.backgroudSize='50px 100px';

img.style.backgroudRepeat='on-repeat';

如何使用JS等比例改变显示图片的大小

原理：

用JS在加载图片后判断图片是否突破规定的高和宽，如果超过再根据图片的宽高比例进行调整。

特别说明，JS代码只限制图片的高或者宽时，宽或者高会按照比例进行相应调整。

假如你需要把所有的图片显示在140*226的区间里面，那么就使用下面这样的代码：

img src=2009/04/1232336585-19.jpg onload='if (this.width140 || this.height226) if (this.width/this.height140/226) this.width=140; else this.height=226;'

关于js代码修改图片大小和css调整图片大小代码的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。