如何使用CSS实现图片的点击放大效果？

要使用 CSS 实现图片点击放大效果，通常会配合 HTML 的 `<a>` 标签和 JavaScript 来实现，因为纯 CSS 自身并不具备这种交互功能。这里有一个简单的步骤说明：

1. **HTML 结构**：
首先创建一个链接包裹着图片，并添加锚点用于触发放大效果：

   <a href="#" class="zoom-image">
     <img src="your-image-source.jpg" alt="Image description" />
   </a>

2. **CSS**：
设置初始状态下的图片大小和鼠标悬停时的放大比例：

   .zoom-image img {
     transition: transform 0.3s ease-in-out; /* 添加平滑的过渡效果 */
     max-width: 100%;
     height: auto;
   }

   .zoom-image:hover img {
     transform: scale(1.1); /* 图片放大10% */
   }

3. **JavaScript (可选)**：
如果你想在点击时实现真正的放大效果，而不是仅仅依赖于鼠标悬停，可以在 JavaScript 中监听 `click` 事件，然后改变图片的大小：

   const zoomImage = document.querySelector('.zoom-image');

   zoomImage.addEventListener('click', function() {
     this.firstChild.style.transform = 'scale(1.5)';
   });

然后添加一个 `mouseleave` 事件，当用户离开图片时恢复原大小：

   zoomImage.addEventListener('mouseleave', function() {
     this.firstChild.style.transform = 'scale(1)';
   });

注意，这只是一个基本示例，实际应用中可能会考虑使用更复杂的库或插件，比如 Magnific Popup 或 Lightbox，它们提供了更多的定制选项。