HTML click on the picture to independently display the magnification effect realization method

        To realize the effect of independently displaying and zooming in on a picture after clicking it in HTML, you can use JavaScript to control the display and hiding of the picture, and add appropriate styles. Here is an example:

<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>

In the above example, a style named is defined through CSS to control the display and style of the modal box.  The class sets properties such as fixed positioning, background color, and transparency of the modal box. In addition,  the class defines the style of the image in the modal box, including the maximum width and maximum height, and centers it horizontally and vertically. .modal .modal.modal-image

In HTML, use  <img> tags to display images, and  onclick call functions in JavaScript through events  showModal() to display modal boxes. The closing of the modal box  is realized by onclick calling the function in JavaScript through the event  of the modal box itself hideModal() .

The JavaScript part defines two functions: showModal() used to display the modal box and set the source of the picture in the modal box, and hideModal() used to hide the modal box.

By using the above code, when the picture is clicked, an independent modal box will be displayed, which contains the enlarged display of the clicked picture. When clicking on the modal area, the modal will close.

You can customize the styles and adjust the code as needed to suit your specific needs.