如何让网站图片点击后变大?

在给网站添加内容的时候，少不了要添加图片，有时候我们在文章中放置的图片需要很大才能看清楚，但是为了html页面内容看起来更加整洁美观，我们又必须限定图片的尺寸，那么如何让图片既不影响网站页面美观，又能让用户看到清晰的图片呢?

这个时候我们可以通过这样一种方法来解决以上问题：html页面中放置的图片尺寸保持和内容相匹配(不影响页面布局美观)，当用户看不清图片时，通过点击图片然后就可以看到原始尺寸的清晰的图片。

我们可以看下以下图片效果(请在PC端查看图片点击后放大效果，手机端不适用，原因后面会讲)：

点击上方图片可放大

实现方法如下：

1.添加图片代码

<div id="restrictsize"> <img src="图片地址" alt="" title="" /> </div> <!--显示和内容匹配图片-->
<div id="moriginalsize"> <!--设置移动端不显示放大图片-->
<div id="originalsize"> <img src="留空不填" alt="" title="" / > </div> <!--PC端放大图片显示-->
</div>


2.添加Css代码

#restrictsize { width:100%; height:auto;} /*尺寸根据我们内容需要设定*/
#restrictsize img{ width:100%; height:auto;} /*设置宽度100%，继承上面restrictsize宽度*/
#originalsize{
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
text-align: center;
display: none;
z-index: 9999999;
background-color: rgba(0,0,0,0.5);
} /*设置点击后图层，宽高都为100%，也就是宽高和浏览器尺寸一致*/
#originalsize img{
position: relative;
margin: 5% auto;
} /*设置点击后图片样式*/
@media only screen and (max-device-width : 768px) {
#moriginalsize{
display: none;
}
} <!--设置手机端放大图片不显示-->


注意:设置手机端不显示放大图片是因为手机端网页都自带的有放大功能，我们手动拖动扩大页面就可以得到整个html页面的放大效果，另外这种图片放大效果在手机端是不兼容的，容易造成图片显示不全。

3.添加Js代码

<script type="text/javascript">
var imgs = document.getElementById("restrictsize").getElementsByTagName("img");
var lens = imgs.length;
var originalsize = document.getElementById("originalsize");
for(var i = 0; i < lens; i++){
imgs[i].onclick = function (event){
event = event||window.event;
var target = document.elementFromPoint(event.clientX, event.clientY);
showBig(target.src);
}
}
originalsize.onclick = function (){
originalsize.style.display = "none";
}
function showBig(src){
originalsize.getElementsByTagName("img")[0].src = src;
originalsize.style.display = "block";
}
</script>


这种方法比较简单，也可以根据自己的需要进行代码修改，需要注意的有三个方面：一是js代码一定要放在图片html代码后面，否则放大效果会失效，如果你不想每次添加放大图片都加js，可以放到页面尾部模板。二是点击后的图片尺寸是以浏览器窗口尺寸为基础设置的，所以网站中图片最大显示尺寸不会超过浏览器窗口尺寸（所以放大后也并不一定就是图片的原始尺寸）。三是原始图片一定要清晰，如果原始图片尺寸下都不能清晰显示，那么在html页面中再放大也不会有效果。