今天学习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）浏览器半屏时
如果觉得《onresize()调整浏览器窗口时 使图片等控件自适应地变化大小》对你有帮助，请点赞、收藏，并留下你的观点哦！
