onresize()调整浏览器窗口时，使图片等控件自适应地变化大小

最新推荐文章于 2022-06-12 22:43:55 发布

casia_mengmeng

最新推荐文章于 2022-06-12 22:43:55 发布

阅读量5.4k

点赞数 2

分类专栏： JavaScript学习笔记文章标签： onresize JavaScript 图片自适应

本文链接：https://blog.csdn.net/u014691453/article/details/52993821

版权

JavaScript学习笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

今天学习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）浏览器全屏时