Question

js 控制图片大小

求教各位高手，要求使用 getElementsByTagName("img") 方法 使的 <div id=mybox></div> 里面所有的图片底部100像素隐藏，宽度不变，比如<div id=mybox></div> 中有一个 图片 高300 宽300，js处理后变成 高200 宽300 但是图片不缩放，底部100像素仅仅是隐藏。麻烦高手写个代码
-------------------------------------------------------------
是我没说清楚，div里面的高度不定，可能里面有很多文字，可能里面有好几张图片，可能还有表格，我想处理的仅仅是div里面的若干图片而已，div的高度是自适应的

Answer 1

这种情况用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%;}

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

Answer 2

<div id="demo" style="width:300px;height:300px;border:1px solid red; overflow:hidden;">
<img src="aaaaa.jpg" width="300" height="300"/>
</div>
<input type="button" value="隐藏" onclick="hide()" />
<input type="button" value="显示" onclick="show()" />
<script>
function hide() {
document.getElementById("demo").style.height = "200px";
}
function show() {
document.getElementById("demo").style.height = "300px";
}
</script>
加我好友QQ：给你解决:20011011

Answer 3

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以上吧,如果不确定,可在高度设置之前进行判断

Answer 4

<div id=mybox style='overflow:hidden;height:200px'></div>
你把图片放到里面就可以了

Answer 5

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