js 控制图片大小
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js 控制图片大小相关的知识，希望对你有一定的参考价值。
求教各位高手，要求使用 getElementsByTagName("img") 方法 使的 <div id=mybox></div> 里面所有的图片底部100像素隐藏，宽度不变，比如<div id=mybox></div> 中有一个 图片 高300 宽300，js处理后变成 高200 宽300 但是图片不缩放，底部100像素仅仅是隐藏。麻烦高手写个代码
-------------------------------------------------------------
是我没说清楚，div里面的高度不定，可能里面有很多文字，可能里面有好几张图片，可能还有表格，我想处理的仅仅是div里面的若干图片而已，div的高度是自适应的
<img src="images/pic.png" />
或者：
<img src="images/pic.png" style="width:100px; height:100px" />
当页面中图片非常多，且要求每张图片的大小依据其父容器来固定怎么办？可以使用max-weight：
img max-weight:100%;
这样图片会自动缩放到和其父容器等宽。 参考技术A <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本回答被提问者采纳 参考技术B 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以上吧,如果不确定,可在高度设置之前进行判断 参考技术C <div id=mybox style='overflow:hidden;height:200px'></div>
你把图片放到里面就可以了 参考技术D 先获取到该div对象，然后设置div的height为200，并给它的样式设个overflow为hidden
S实现控制图片显示大小的方法图片等比例缩放功能
S实现控制图片显示大小的方法【图片等比例缩放功能】
【需求】：读取磁盘中的图片，展示在弹出框中，等比例缩放图片，使图片显示完全。
（读取磁盘中的图片展示在前台，请参照我的另一篇文章：）
【开发】：
调用说明：
直接调用js函数即可。
我测试是一个image 标签中直接调用，如下：
<div> <img id="showImageimg" src="/sirdifoa/applycorrection/getImage.do?imgName=2017001.jpg" title="2017001.jpg" onload="AutoResizeImage(500,500,this)"> </div>
【效果】：
【js代码】：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>最新javascript自动按比例显示图片，按比例压缩图片显示</title>
<script type="text/javascript">
function AutoResizeImage(maxWidth,maxHeight,objImg){
var img = new Image();
img.src = objImg.src;
var hRatio;
var wRatio;
var Ratio = 1;
var w = img.width;
var h = img.height;
wRatio = maxWidth / w;
hRatio = maxHeight / h;
if (maxWidth ==0 && maxHeight==0){
Ratio = 1;
}else if (maxWidth==0){//
if (hRatio<1) Ratio = hRatio;
}else if (maxHeight==0){
if (wRatio<1) Ratio = wRatio;
}else if (wRatio<1 || hRatio<1){
Ratio = (wRatio<=hRatio?wRatio:hRatio);
}
if (Ratio<1){
w = w * Ratio;
h = h * Ratio;
}
objImg.height = h;
objImg.width = w;
}
</script>
</head>
<body>
<br />
原图显示（534 X 800）<br />
onload="AutoResizeImage(0,0,this)<br />
<a href="http://files.jb51.net/file_images/article/201702/2017218121607044.jpg" target="_blank"><img src="http://files.jb51.net/file_images/article/201702/2017218121607044.jpg" border="0" width="0" height="0" onload="AutoResizeImage(0,0,this)" alt="534 X 800"/></a><br/><br />
1.按宽度250压缩,不限制高度 按比例压缩<br />
onload="AutoResizeImage(250,0,this)"<br />
<a href="http://www.jb51.net/" target="_blank"><img src="http://files.jb51.net/file_images/article/201702/2017218121607044.jpg" border="0" width="0" height="0" onload="AutoResizeImage(250,0,this)" alt="250 X 374"/></a><br /><br />
2.按高度250压缩,不限制宽度 按比例压缩<br />
onload="AutoResizeImage(0,250,this)"<br />
<a href="http://www.jb51.net/" target="_blank"><img src="http://files.jb51.net/file_images/article/201702/2017218121607044.jpg" border="0" width="0" height="0" onload="AutoResizeImage(0,250,this)" alt="166 X 250"/></a><br /><br />
3.按高度250宽度250 按比例压缩<br />
onload="AutoResizeImage(250,250,this)"<br />
<a href="http://www.jb51.net/" target="_blank"><img src="http://files.jb51.net/file_images/article/201702/2017218121607044.jpg" border="0" width="0" height="0" onload="AutoResizeImage(250,250,this)" alt="200 X 300"/></a><br /><br />
4.高宽不等比例压缩 （400 X 512）,此时高度不变，会自动按高度的比例压缩。<br />
onload="AutoResizeImage(400,512,this)"<br />
<a href="http://www.jb51.net/" target="_blank"><img src="http://files.jb51.net/file_images/article/201702/2017218121607044.jpg" border="0" width="0" height="0" onload="AutoResizeImage(400,512,this)" alt="341 X 512"/></a><br /><br />
5.高宽不等比例压缩 （300 X 600）,此时宽度不变，会自动按宽度的比例压缩。<br />
onload="AutoResizeImage(300,600,this)"<br />
<a href="http://www.jb51.net/" target="_blank"><img src="http://files.jb51.net/file_images/article/201702/2017218121607044.jpg" border="0" width="0" height="0" onload="AutoResizeImage(300,600,this)" alt="300 X 449"/></a><br /><br />
6.如果图片本来的高度和宽度小于压缩的最大高度和宽度，则不会拉大显示图片（按原图显示）<br />
原图444 x 207,压缩为 500 x 600,将保持原图显示<br />
onload="AutoResizeImage(500,600,this)"<br />
<a href="http://www.jb51.net/" target="_blank"><img src="http://files.jb51.net/file_images/article/201702/2017218122006996.jpg" border="0" width="0" height="0" onload="AutoResizeImage(500,600,this)" alt="444 X 207"/></a><br /><br />
</body>
</html>运行效果图如下：
本文出自 “JianBo” 博客，请务必保留此出处http://jianboli.blog.51cto.com/12075002/1969528
以上是关于js 控制图片大小的主要内容，如果未能解决你的问题，请参考以下文章