HTML单击图片独立放大

 代码：

<style>
   .modal {
      display: none;
      position: fixed;
      z-index: 9999;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.8);
   }
 
   .modal-image {
      display: block;
      max-width: 90%;
      max-height: 90%;
      margin: auto;
      margin-top: 5%;
   }
</style>
 
<img src="image.jpg" alt="图像" onclick="showModal(this)">
 
<div id="modal" class="modal" onclick="hideModal()">
  <img id="modal-image" class="modal-image">
</div>
 
<script>
   function showModal(image) {
      var modal = document.getElementById("modal");
      var modalImage = document.getElementById("modal-image");
      modal.style.display = "block";
      modalImage.src = image.src;
   }
 
   function hideModal() {
      var modal = document.getElementById("modal");
      modal.style.display = "none";
   }
</script>

解释：

首先，我们通过CSS定义了一个名为 .modal 的样式，添加了模态框的固定定位、背景颜色和透明度等属性。

其次，.modal-image 类定义了模态框中图片的样式，包括最大宽度和最大高度，并将其在水平和垂直方向上居中。

在HTML中，使用 <img> 标签来展示图片。

调用 JavaScript 中的 showModal() 函数来显示模态框。模态框的关闭通过模态框本身的 onclick 事件调用 JavaScript 中的 hideModal() 函数来实现。