如何实现图片点击放大，切换或再次点击时恢复原尺寸？

你的代码目前只实现了单张图片放大，但未处理其他图片的尺寸重置，也没支持当前图片的放大/缩小切换。可以按以下方式修改：

1. 优化JavaScript函数 #

修改后的函数会先统一重置所有图片尺寸，再处理当前点击的图片：

function enlargeImg(img) {
  // 获取所有带images-ext类的图片元素
  const allImages = document.querySelectorAll('.images-ext');
  // 遍历所有图片，恢复原尺寸
  allImages.forEach(image => {
    image.style.transform = "scale(1)";
  });
  // 判断当前图片状态，切换放大/缩小
  if (img.style.transform === "scale(1.5)") {
    img.style.transform = "scale(1)";
  } else {
    img.style.transform = "scale(1.5)";
  }
}

2. 将过渡样式移到CSS（推荐） #

把过渡效果从JS中剥离到CSS里，实现样式与逻辑分离，同时避免重复设置：

.images-ext {
  transition: transform 0.25s ease;
  cursor: pointer; /* 可选：添加鼠标指针变化，提升交互体验 */
}

功能说明 #

• 每次点击图片时，先将所有图片的transform重置为scale(1)，确保之前放大的图片自动恢复原尺寸。
• 再判断当前点击的图片是否已处于放大状态，若是则缩小，否则放大，实现点击同一张图片也能切换尺寸的效果。

内容的提问来源于stack exchange，提问作者Mattobiwan