您好,欢迎光临! 推荐您使用Chrome浏览器访问本站。

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; }

您可能也喜欢