js 控制图片大小
求教各位高手,要求使用getElementsByTagName("img")方法使的<divid=mybox></div>里面所有的图片底部100像素隐藏,宽度不变,比如...
求教各位高手,要求使用 getElementsByTagName("img") 方法 使的 <div id=mybox></div> 里面所有的图片底部100像素隐藏,宽度不变,比如<div id=mybox></div> 中有一个 图片 高300 宽300,js处理后变成 高200 宽300 但是图片不缩放,底部100像素仅仅是隐藏。麻烦高手写个代码
-------------------------------------------------------------
是我没说清楚,div里面的高度不定,可能里面有很多文字,可能里面有好几张图片,可能还有表格,我想处理的仅仅是div里面的若干图片而已,div的高度是自适应的 展开
-------------------------------------------------------------
是我没说清楚,div里面的高度不定,可能里面有很多文字,可能里面有好几张图片,可能还有表格,我想处理的仅仅是div里面的若干图片而已,div的高度是自适应的 展开
6个回答
2015-12-18 · 做真实的自己 用良心做教育
千锋教育
千锋教育专注HTML5大前端、JavaEE、Python、人工智能、UI&UE、云计算、全栈软件测试、大数据、物联网+嵌入式、Unity游戏开发、网络安全、互联网营销、Go语言等培训教育。
向TA提问
关注
展开全部
这种情况用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%;}
这样图片会自动缩放到和其父容器等宽。
<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%;}
这样图片会自动缩放到和其父容器等宽。
展开全部
<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
<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
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
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以上吧,如果不确定,可在高度设置之前进行判断
//只写单个图片的处理
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 id=mybox style='overflow:hidden;height:200px'></div>
你把图片放到里面就可以了
你把图片放到里面就可以了
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
先获取到该div对象,然后设置div的height为200,并给它的样式设个overflow为hidden
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询