今天学习JS时,按照教程里如下代码实现“改变浏览器窗口的图片自适应问题”,但没有达到想要的效果,图片在改变浏览器窗口的时候越变越大,刷新页面后又恢复原大小。
height = (document.body.clientHeight-100)*0.9;
document.getElementById("imageID").style.height = height.toString()+"px";
暂时还没清楚为什么以上代码无效,后来选用了onresize() 功能来实现自适应的功能,代码如下。仅通过 window.outerHeight 调整浏览器图片的大小。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%! int fontSize; %>
<!DOCTYPE html>
<html>
<head>
<title>testCSDN</title>
<script type="text/javascript">
//setInterval("location.reload();",1000);
function resizeCamera(){
//alert('You have changed the size of the window');
var height = (window.outerHeight-100)*0.3;
//var width = (window.outerWidth-100)*0.3;
document.getElementById("cameraImg1").style.height=height.toString()+"px";
//document.getElementById("cameraImg1").style.width=width.toString()+"px";
}
</script>
</head>
<body οnresize="resizeCamera();" οnlοad="resizeCamera();">
<p>
当前日期: <%= (new java.util.Date()).toLocaleString()%>
</p>
<div style="margin-top:100px; text-align:center">
<img id="cameraImg1" src="/TomcatTest2/images/camera-normal.png" style="" οnclick=""/><hr/>
<img id="cameraImg2" src="/TomcatTest2/images/camera-query.png"/></div>
</body>
</html>
效果图如下:
(1)浏览器全屏时
(2)浏览器半屏时