当点击图像它做大屏幕的中心

Question

---

你好， 我上一个项目，用户上传图片，我想，当图像用户点击它做大全屏幕上和在中心工作屏幕如何实现这一目标？

这里是我的代码：

<img src="@Model.Pic1" class="img-responsive" width="750" height="750"/> <img src="@Model.Pic2" class="img-responsive" width="750" height="750"/> <img src="@Model.Pic3" class="img-responsive" width="750" height="750"/> <img src="@Model.Pic4" class="img-responsive" width="750" height="750"/> <img src="@Model.Pic5" class="img-responsive" width="750" height="750"/> 

Answer 1

您可以使用position: fixed;，使相对视点的元素位置。

然后用top: 50%; left: 50%; transform: translate(-50%, -50%);居中。 （这会将左上角定位在屏幕中间，但随后会将其移至图像大小的-50％，-50％，以使其居中）。

要更改状态，只需创建一个CSS-选择正常的位置和一个居中并通过JS切换第二个类。 （使用element.classList.toggle("centeredStyle");）

请注意，由于您将图像的位置从静态变为固定，会重新排列其他元素（因为position: fixed;的元素不占用空间）。为了制止这种情况，您可以简单地包装所有图像，并始终调整包装的大小，而不是图像本身。