HTML/CSS -在悬停时在屏幕中心以实际大小显示图像，单击以再次缩小？

HTML/CSS中可以通过CSS的属性和伪类来实现在悬停时在屏幕中心以实际大小显示图像，单击以再次缩小的效果。

首先，需要一个容器来包裹图像，并设置容器的宽度和高度，使其占据整个屏幕的大小。可以使用<div>标签作为容器，然后使用CSS设置容器的样式。

接着，在CSS中使用background属性来设置容器的背景图像，并设置background-size为contain，使背景图像按照实际大小显示。还可以使用background-position将图像置于容器的中心位置。

然后，使用CSS的伪类:hover来设置鼠标悬停时容器的样式。在:hover伪类中，可以调整容器的background-size为100%，使图像在悬停时铺满整个容器。

最后，使用JavaScript为容器添加点击事件，当容器被点击时，执行缩小图像的操作。可以通过改变容器的样式或使用CSS的transform属性来缩小图像。

以下是一个示例的HTML/CSS代码实现：

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  width: 100vw;
  height: 100vh;
  background-image: url("image.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}

.container:hover {
  background-size: 100%;
  cursor: pointer;
}

.container.clicked {
  /* Add styles for zooming out the image */
  /* Example: transform: scale(0.5); */
}
</style>
</head>
<body>
<div class="container"></div>

<script>
var container = document.querySelector(".container");

container.addEventListener("click", function() {
  container.classList.toggle("clicked");
});
</script>
</body>
</html>

该示例中，容器的背景图像为image.jpg，鼠标悬停时图像会以实际大小显示，并且鼠标变为指针形状。当容器被点击时，图像会缩小。你可以将image.jpg替换为你想要显示的图像。

请注意，这只是一个基本的示例，你可以根据需求进行样式和交互的定制化。关于HTML和CSS的更多详细信息，你可以参考腾讯云云开发文档中的相关内容：HTML/CSS介绍与学习。