<!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" manifest="../manifest.mf">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>北京市建设工程安全质量状况评估信息平台</title>
<script src="../PadScript/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
function DrawImg(boxWidth, boxHeight) {
var imgWidth = $("#img1").width();
var imgHeight = $("#img1").height();
//比较imgBox的长宽比与img的长宽比大小
if ((boxWidth / boxHeight) >= (imgWidth / imgHeight)) {
//重新设置img的width和height
$("#img1").width((boxHeight * imgWidth) / imgHeight);
$("#img1").height(boxHeight);
//让图片居中显示
var margin = (boxWidth - $("#img1").width()) / 2;
$("#img1").css("margin-left", margin);
}
else {
//重新设置img的width和height
$("#img1").width(boxWidth);
$("#img1").height((boxWidth * imgHeight) / imgWidth);
//让图片居中显示
var margin = (boxHeight - $("#img1").height()) / 2;
$("#img1").css("margin-top", margin);
}
}
</script>
</head>
<body>
<div id="imgBox" style=" 500px; height: 400px; background: #cccccc; overflow: hidden">
<img id="img1" alt="" src="../PadImages/status11.png" onclick="DrawImg(500,400);" />
</div>
</body>
</html>