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

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

基础HTML结构

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

<img src="example.jpg" alt="示例图" class="clickable-img">

添加CSS缩放样式

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

<style>
.clickable-img {
  transition: transform 0.3s ease;
}
.clickable-img.shrink {
  transform: scale(0.7); /* 缩小到70% */
}
</style>

用JavaScript切换缩放状态

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

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

立即学习“前端免费学习笔记（深入）”；

<script>
document.querySelector('.clickable-img').addEventListener('click', function() {
  this.classList.toggle('shrink');
});
</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提升可点击感知）

不复杂但容易忽略：确保图片加载完成后再绑定事件，或把脚本放在</body>前，避免找不到元素。