网页中图片点击放大再点击恢复

网页中图片点击放大并恢复通常是通过JavaScript或者CSS+HTML的结合来实现的。常见的做法是使用鼠标悬停事件（hover）配合zoom属性或者transform: scale()来调整图片大小。当用户将鼠标指针放在图片上时，图片会放大；移开鼠标则恢复原尺寸。下面是一个简单的例子：

<div class="image-container">
    <img src="your-image-url" alt="Your Image" onclick="zoomImage(this)">
</div>

<style>
.image-container {
    position: relative;
}
.image-container img {
    transition: transform 0.5s ease;
}

.image-container img:hover {
    transform: scale(1.2); /* 图片放大 */
}

/* 取消点击后的缩放效果 */
.image-container img:focus {
    transform: none; /* 恢复原大小 */
}
</style>

<script>
function zoomImage(img) {
    if (img.classList.contains('is-zoomed')) {
        img.style.transform = 'scale(1)';
        img.classList.remove('is-zoomed');
    } else {
        img.style.transform = 'scale(1.2)';
        img.classList.add('is-zoomed');
    }
}
</script>

在这个示例中，`is-zoomed`类用于标记是否正在放大状态。用户单击图片，函数检查当前状态并相应地放大或恢复原状。