css 图像缩放与对齐[关闭]

py49o6xq 于 2022-12-20 发布在其他

关注(0)|答案(1)|浏览(140)

**已关闭。**此问题需要debugging details。当前不接受答案。

编辑问题以包含desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem。这将有助于其他人回答问题。
2天前关闭。
Improve this question
我需要帮助从W3Schools网站上这个代码，我想离开所有的元素集中在页面上。然而，当我集中，功能的透镜是图像的旧位置。
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_image_zoom
我改了密码但我不明白
当图像居中时，透镜在图像之外，就像她以前的位置一样
Image Center, len incorret position
解决了！！！
为了解决这个问题，我们创建了一个包含所有元素的div class=“main”。在css代码中，使用了我们的朋友Samar给我们的设置。谢谢Samar。
Imagem Solved!

1条答案

所以，据我所知，你希望图像和缩放结果都保持原样，但在页面中居中？
如果是这样的话，你需要像这样在你的css中使用flexbox：

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

有关Flexbox的更多信息，请查看本教程：https://css-tricks.com/snippets/css/a-guide-to-flexbox/
希望这对你有帮助：）