前言
利用CSS实现图片的点击缩放是一个很值得研究的效果。在某些业务需求场景中，我们可能并没有足够的空间展示过大的图片，这就需要限制图片容器的宽度和高度。然而图片限制了宽度，一些图片的细节便又无法看清。
实现这种需求的一种直观方式是固定图片宽高，然后提供点击缩放的功能，这是本文要讨论的要点。
需要额外说明的是，CSS实现业务需求的方式是灵活的，这与开发者的功底也是密切相关的，实现上述的业务需求并非只有一种方式，甚至限于作者水平，以下所述也是不完善的，仅作分享，读者可自行探索和发挥。
一、需求关键点
1、固定宽高
2、点击放大
3、再次点击缩小
4、优先用CSS实现
这里强调了优先使用CSS，这是因为同样的效果，使用CSS实现一般而言性能更好。况且使用JS直接修改样式，易导致维护时难以定位问题。在开发中，建议实现JS和CSS的松耦合。这对代码优雅有利，利于后期维护。
二、HTML结构
<div class="img-container">
<img src="./test.jpg" alt="案例图片" class="img">
</div>
以上，只有两层结构，我们的CSS都作用于这两层元素上。个人观点，HTML结构越简单越加清晰。只有当简单的HTML实在无法实现相关业务需求时，才建议添加元素用于实现复杂效果。
三、CSS代码
1、给容器设置固定宽高
2、将img元素设置为容器的宽高
3、设置img元素放大时的样式
4、适当使用定位
.img-container{
position: relative;
100px;
height: 100px;
}
.img-container .img{
height: 100%;
100%;
cursor: pointer;
}
.img-container .img.active{
position: absolute;
height: 400%;
400%;
}
四、JS代码
1、本文主要讨论CSS，但要实现图片点击缩放，光使用CSS hover伪类的体验并不佳，鼠标移开就失去放大效果，无法悬停，因此使用JS的点击事件来进行监听。
2、JS部分的主要思想是改变图片的类名，这样可以实现JS和CSS的松耦合，避免JS直接改变样式，利于维护。
var img = document.getElementsByClassName('img');
// 点击图片本身
img[0].addEventListener('click',function(e){
// 防止被document监听到
e.stopPropagation();
const isExpand = this.className.indexOf('active') !== -1;
if (!isExpand) {
this.className += ' active';
} else{
this.className = this.className.replace('active', '');
} ;
});
// 点击其他位置
document.addEventListener('click',function(e){
img[0].className = img[0].className.replace('active', '');
});
以上JS部分显得有些繁琐，事实上，这是使用原生JS时几乎必然会呈现的特点。假如使用Vue.js这样的双向绑定框架，对类名进行绑定，那么JS将简单到只需几句代码。或者使用jquery这样的库，那么也将极大简化。
五、优化改进
以下是几个可以适当优化提升的地方：