HTML网页中图片img点击后窗口中最大化居中显示

HTML网页中点击图片后在窗口居中最大化显示图片最简单优雅的方法

下面的代码，可以自动对页面中所有的img标签，在点击后自动弹出一个div层，并最大化显示img图片内容（以图片最大100%显示，最大不超过窗口宽度或者高度，自适应），点击后又自动隐藏回到原界面。

<body>
<div>
	<img width =300px; height=300px;  src="https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_960_720.jpg" >
	<img width =300px; height=300px; src="https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_960_720.jpg" >
</div>

<div id="img-box" class="img-box" onclick="$(this).hide();">
	<img id="bigimg" src="" />
</div>

<style>
	.img-box {
		width: 100%;
		height: 100%;
		left:0;
		top:0;
		vertical-align: middle;
		border: 0;
		margin: 0;
		padding: 0;
		position: fixed;
		z-index: 999;
		display: none;
	}

	.img-box img {
		object-fit: cover;
		max-width: 99%;
		max-height: 100%;
		border-radius:5px;
		border: 2px solid red;
		top:0;
		right: 0;
		left: 0;
		bottom: 0;
		position: absolute;
		margin: auto;
		border-radius:5px;
	}
</style>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$("body").ready(bigImg());

	function bigImg() {
		$("body").find("img").on("click", function () {
			$(this).each(function () {
				$("#bigimg").attr("src", $(this).attr("src"));//将获取的当前点击img的src赋值到弹出层的图片的src
				$("#img-box").show();//弹出层显示
			});
		});
	}
</script>
</body>