一张图查看大图

1.样式

<style type="text/css">
	/*媒体判断HTML里的font-size*/
	html { font-size: 40px; } @media screen and (min-width: 320px) { html { font-size: 17.064px; } } @media screen and (min-width: 360px) { html { font-size: 19.2px; } } @media screen and (min-width: 375px) { html { font-size: 20px; } } @media screen and (min-width: 384px) { html { font-size: 20.48px; } } @media screen and (min-width: 400px) { html { font-size: 21.376px; } } @media screen and (min-width: 414px) { html { font-size: 22.08px; } } @media screen and (min-width: 424px) { html { font-size: 22.616px; } } @media screen and (min-width: 480px) { html { font-size: 25.6px; } } @media screen and (min-width: 540px) { html { font-size: 28.8px; } } @media screen and (min-width: 720px) { html { font-size: 38.4px; } } @media screen and (min-width: 750px) { html { font-size: 40px; } }
	
	/*一张大图*/
	.one_bigPic_contain{
		position: fixed;
		width: 100%;
		height: 100%;
		background-color: #000;
		top: 0;
		left: 0;
	}
	.one_bigPic_contain_wrap {
	    position: relative;
	    top: 50%;
	}
	.one_bigPic_contain_close {
	    width: 1rem;
	    height: 1rem;
	    line-height: 1rem;
	    text-align: center;
	    position: absolute;
	    right: 0.3rem;
	    top: 0;
	    color: #fff;
	    border-radius: 100%;
	    -moz-border-radius: 100%;
	    -webkit-border-radius: 100%;
	    border: 0.05rem solid #fff;
	    background-color: rgba(0,0,0,0.5);
	    z-index: 5;
	}
	.one_bigPic_pic {
	    position: relative;
	    left: 0;
	    top: 0;
	    width: 100%;
	    text-align: center;
	}
	.one_bigPic_pic img{
		max-width: 100%;
		vertical-align:middle;
	}
	.detail-infoBar{
		width: 1.85rem;
		height: 1.85rem;
		border-radius:100%;
	}
	.detail-infoBar img{
		width: 1.85rem;
		height: 1.85rem;
		border-radius:100%;
	}
</style>

2.HTML部分

<!--点击的对象(需要图片地址)-->
<div class="detail-infoBar" style="">
	<img src="xxx.jpg" />
</div>
<!--一张大图部分-->
<div class="one_bigPic_contain" style="display: none;">
	<div class="one_bigPic_contain_wrap">
		<div class="one_bigPic_contain_close">×</div>
		<div class="one_bigPic_pic">
			<img src=""  class="one_bigPic_img"/>
		</div>
	</div>			
</div>

3.js

<!--引入jq-->
<script src="https://code.jquery.com/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	//一张大图
	//点击的图片目标
	$(".detail-infoBar img").on("click",function(){
		//创建img标签
		var str= '<img src="'+$(this)[0].src+'" alt="" class="one_bigPic_img" />';
		//放入容器
		$(".one_bigPic_pic").html(str);
		
		//此处先让其block方便后边获取相应的元素宽高再设置相应的元素宽高
		
		//可能有疑问，一般情况先设置好宽高再进行显示才对，而这里是先显示再设置宽高
		//原因：如果不让其显示，无法获取所需元素的宽高（一直都是0），所以此处必须先显示再获取宽高
		//img是新生成的元素，整个容器的宽高都由img撑起的
		
		$(".one_bigPic_contain").css("display","block");
		var img_height=$(".one_bigPic_pic img").height();
		$(".one_bigPic_contain_wrap").css({"margin-top":-img_height/2+"px"});
		$(".one_bigPic_pic").css({"height":img_height+"px","line-height":img_height+"px"})

	});
	//关闭大图
	$(".one_bigPic_contain_close").on("click",function(){
		$(".one_bigPic_contain").css("display","none");
	});
</script>

4.说明：

    图片路径需自己填充。