点击图片可切换缩放状态：通过css的transform: scale()配合transition实现平滑动画，javascript用classlist.toggle()切换.shrink类控制缩放，支持多图批量绑定及移动端适配。

用CSS的transform: scale()配合JavaScript监听点击事件，就能让图片点击时缩小。核心是切换一个CSS类来控制缩放状态。

基础HTML结构

准备一张图片，加上唯一标识（比如class或id），方便后续操作：

添加CSS缩放样式

定义正常状态和缩小状态的样式。注意要加transition实现平滑动画：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

用JavaScript切换缩放状态

监听图片点击，每次点击就在“缩小”和“恢复”之间切换：

<script><br> document.querySelector('.clickable-img').addEventListener('click', function() {<br> this.classList.toggle('shrink');<br> });<br> </script>

如果页面有多个可点击图片，可用querySelectorAll批量绑定：

document.querySelectorAll('.clickable-img').forEach(img => {
  img.addEventListener('click', function() {
    this.classList.toggle('shrink');
  });
});

可选增强细节

• 缩放中心默认是图片中心，如需改为左上角，加transform-origin: top left;
• 想点一次缩小、再点一次放大，toggle已满足；若需固定为“只缩小不恢复”，改用add和remove
• 移动端也生效，无需额外处理（但注意图片要有cursor: pointer提升可点击感知）

不复杂但容易忽略：确保图片加载完成后再绑定事件，或把脚本放在

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！