js 控制图片大小

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


或者：



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

img {max-weight:100%;}

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

img=...;//获取单个img的引用,前面用getElementsByTagName获取了,这里就不写循环了
//只写单个图片的处理
var pnode=img.parentNode; //img的父节点
var div=document.createElement('div'); //创建一个div用作容器
div.style.overflow='hidden';//overflow和display的设置可单独写个样式,就不需要这2行设置的代码了
div.style.display='inline-block';
div.style.width=img.offsetWidth+"px";//设置大小
div.style.height=img.offsetHeight-100+"px";
pnode.insertBefore(div,img); //将div插入到图片前面
pnode.removeChild(img); //将图片移动到div中
div.appendChild(img); //

动态创建了一个和图片同宽,高度比图片小100像素的层,插入到图片前面,然后把图片移进去,这是我的想法
在运行的时候需要保证图片加载完成,以及图片不是隐藏的. 还有就是图片高度至少要在100PX以上吧,如果不确定,可在高度设置之前进行判断

先获取到该div对象，然后设置div的height为200，并给它的样式设个overflow为hidden