会自动调整图像,使之不超过窗口大小;
请调整窗口大小后刷新页面,观察图片的自适应窗口情况
网页全部代码如下:
<!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=gb2312" />
<title>图片自适应窗口js代码</title>
<script language="javascript">
function getInfo()
{
var info = window.document.getElementById("showImg").getElementsByTagName("img");
for (var i=0;i<info.length;i++)
{
showing(info[i]);
}
}
function showing(imgid)
{
var mypic = new Image();
mypic.src = imgid.src;
var mywidth = mypic.width;
var myheight = mypic.height;
imgid.alt='PictureSize:'+mywidth+"×"+myheight; //用图像的分辨率替换
imgid.border=1; //图像边框为1
//if (myheight >= 375)
//{
//imgid.style.height = 375;
//imgid.style.width = Math.floor(mywidth/(myheight/375));
//}
if (mywidth >=document.documentElement.clientWidth-20) //图片宽度大小选择,document.documentElement.clientWidth是可见区域宽度
{
imgid.width =document.documentElement.clientWidth-20;
imgid.height = Math.floor(myheight/(mywidth/imgid.width)); //图片高度计算
}
else
{
imgid.width = mywidth;
imgid.height = myheight;
}
imgid.alt=imgid.alt+' ShowSize'+imgid.width+"×"+imgid.height; //用图像的分辨率替换
}
window.onload = function ()
{
getInfo();
}
</script>
</head>
<body>
<div id="showImg">
<p><a href="pic/testpic01.jpg" target="_blank"><img src="pic/testpic01.jpg" /></a></p>
<p><a href="pic/testpic02.jpg" target="_blank"><img src="pic/testpic02.jpg" /></a></p>
<p><img src="pic/testpic03.jpg" width="688" height="160" /></p>
</div>
</body>
</html>