图片点击放大预览

<img class="small_img show-img" src="/uploadfile/202303/144d7d5457daa9a.jpg">

.view-show-img {
    position: fixed;
    display: none;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0,0.8);
    text-align: center;
    z-index: 1030;
}
.view-show-img img {
    max-width: 90%;
    max-height: 90%;
    vertical-align: middle;
    cursor: zoom-out;
    border-radius: 3px;
}
.view-show-img span {
    height: 100%;
    width: 0;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
}

<script>
	$(function(){
		$('.show-img').click(function(){
			$('.view-show-img').remove();
			let src = $(this).attr('src');
			let template = `
				<div class="view-show-img" style="display:block">
					<img src="${src}">
    				<span></span>
				</div>
			`;
			$('body').append(template);
		})
		$('body').on('click','.view-show-img',function(){
			$(this).remove();
		})
	})
</script>