div容器内图片自动缩放
div容器内图片自动缩放
网上搜索到的一段代码:
<script language="javascript"> <!-- //容器内图片自缩放函数,当图片超过最大高度或宽度时,按比例缩放到指定高或宽。 function img_init(div_id,width,height) { var img_vh=width; //定义最大高度 var img_vw=height; //定义最大宽度 var divn=document.getElementById(div_id); var imgn=divn.getElementsByTagName("img"); var oldheight,oldwidth; for (var i=0;i<imgn.length;i++) { if(imgn[i].height>img_vh || imgn[i].width>img_vw) { if(imgn[i].height/img_vh > imgn[i].width/img_vw) { oldheight=imgn[i].height; imgn[i].height=img_vh; imgn[i].width=imgn[i].width*(img_vh/oldheight); } else { oldwidth=imgn[i].width; imgn[i].width=img_vw; imgn[i].height=imgn[i].height*(img_vw/oldwidth); } } } } //onload多处理函数 //multiOnload("twiceFunc('var1')"); //multiOnload(FuncName); //multiOnloadEx(FuncName, HtmlObj, EveName); //FuncName是需要附加的代码或函数;HtmlObj是被附件的对象,即HTML标记;EveName是被附加的事件。 //第三个参数EveName可以省略,默认值为onload。 function multiOnload(FuncName) { var oldProc = window.onload ? window.onload.toString() : ""; if (oldProc.indexOf("anonymous()") > 0) { oldProc = oldProc.substring(oldProc.indexOf("{") + 1, oldProc.lastIndexOf("}")) + "; "; } oldProc += FuncName; window.onload = new Function (oldProc); } function multiOnloadEx(FuncName, HtmlObj, EveName) { if (EveName == null || EveName == "") EveName = "onload"; var oldProc; oldProc = eval("HtmlObj." + EveName + " ? HtmlObj." + EveName + ".toString() : \"\""); if (oldProc.indexOf("anonymous()") > 0) { oldProc = oldProc.substring(oldProc.indexOf("{") + 1, oldProc.lastIndexOf("}")) + "; "; } oldProc += FuncName; eval("HtmlObj." + EveName + " = new Function (oldProc);"); } multiOnload("img_init('content',800,600)"); //执行重设图片尺寸,可以放任意位置运行。 //--> </script>
当然如下方式更简洁
.post img { max-width:99%; overflow:hidden; }