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