如何制作缩略图<img>在点击时显示完整尺寸的图像？

要制作缩略图，可以使用HTML和JavaScript。以下是一个简单的示例，展示了如何在点击缩略图时显示完整尺寸的图像：

首先，在HTML中创建一个缩略图和一个完整尺寸的图像元素：

<!DOCTYPE html>
<html>
<head>
 <style>
    .thumbnail {
      width: 100px;
      height: 100px;
      cursor: pointer;
    }
    .full-size {
      display: none;
      max-width: 100%;
      max-height: 100%;
    }
  </style>
</head>
<body>
  <img src="thumbnail.jpg" class="thumbnail" onclick="showFullSizeImage()" />
  <img src="full-size.jpg" class="full-size" id="full-size-image" />
</body>
</html>

接下来，使用JavaScript编写一个函数，当点击缩略图时，显示完整尺寸的图像：

  function showFullSizeImage() {
    var fullSizeImage = document.getElementById("full-size-image");
    if (fullSizeImage.style.display === "none") {
      fullSizeImage.style.display = "block";
    } else {
      fullSizeImage.style.display = "none";
    }
  }
</script>

这个示例中，缩略图和完整尺寸的图像都是通过HTML的<img>标签加载的。当用户点击缩略图时，JavaScript函数showFullSizeImage()会被调用，完整尺寸的图像会显示或隐藏。

注意：这个示例仅用于演示目的，实际应用中可能需要进行更多的优化和调整。