对齐和缩放图像

Question

我需要 W3Schools 网站上的此代码帮助，我想将所有元素保留在页面中央。然而，当我居中时，该功能的镜头针对图像的旧位置。

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_image_zoom

改了代码，但看不懂

当图像居中时，镜头位于图像之外。就像这是她以前的职位一样

图像中心，镜头位置不正确

已解决!!!

为了解决这种情况，创建了一个包含所有元素的 div class="main"。在CSS代码中，使用了我们的朋友Samar给我们的设置。谢谢萨马尔。

图像已解决！

Answer 1

那么，据我了解，您希望图像和缩放结果保持原样，但在页面中居中？

如果是这样，您需要在 css 中使用 flexbox，如下所示：

.img-zoom-container {
  position: relative;
  flex-direction: column;
  display: flex;
  align-items: center;
}