Html 如何在页面上水平和垂直居中放置图像，除非图像太大而无法容纳？

我正在尝试使用HTML和CSS实现一个基本的图像查看器，图像在页面中保持居中，除非图像太大而无法容纳。在这种情况下，用户应该能够滚动查看图像的其余部分，而不留任何边距。如果只有一个尺寸太大而无法安装，则另一个尺寸将保持居中。除了图像，页面上没有其他内容

但是，图像的大小需要由缩放因子指定，以便我可以相对于其原始大小放大或缩小它。这意味着我不能使用以像素为单位的显式宽度/高度，也不能根据页面大小调整其大小。我尝试过调整它的TransformCSS属性，即transform:scale2.5，但这通常会导致图像顶部被切断。我还尝试通过将图像的“显示”属性设置为“内联块”，将其“高度”属性设置为“自动”，这样我就可以将其宽度设置为希望缩放的百分比，但我不知道如何将其保持在页面中心，如上段所述

---

我怎样才能做到这一点？到目前为止，我已经尝试了十几种不同的方法在页面上居中放置一个元素，但没有一种方法能产生我想要的这种行为。例如，我使用FlexBox使图像水平和垂直居中，但一旦图像变得太高而无法容纳，图像顶部就会再次被切断。

有几种方法可以实现水平和垂直对齐。然而，它们通常是分开并以不同的方式完成的。你可以看看W3学校，他们对每一所学校都做了一些教程：

此外，如果您愿意使用bootstrap，则一切都会变得更加容易，尤其是居中，您可以查看以下链接：

下面是一种快速定心方法。这要归功于：我自己做了一些小的改进

.外部{ 显示：表格； 位置：绝对位置； 身高：100%； 宽度：100%； } .中{ 显示：表格单元格； 垂直对齐：中间对齐； } .内部{ 左边距：自动； 右边距：自动； 宽度：400px； 文本对齐：居中； /*你想要什么宽度都行*/ } 内容 从前，一个沉闷的午夜

---

您可以使用flexbox和带边距的居中来获得：

身体{ 最小高度：100vh； 保证金：0； 显示器：flex； } 车身>img{ 保证金：自动； }

---

我很惊讶有这么简单的解决方案。你知道我如何使用这种方法来上下缩放图像吗？我需要能够使用缩放值调整图像大小，即2.5使图像比其正常大小大2.5倍。如果我使用CSS属性transform=scale2.5，尽管图像的顶部会被切断。我不确定是否有一个好方法可以让我使用图像的宽度/高度css属性，而不必让它与页面大小而不是图像大小相关。请注意，我编辑了我的问题，以便更清楚地说明我在尝试做什么。我已经尝试过这种将元素居中的方法，但我还没有弄清楚如何在保持所需行为的同时按比例上下缩放图像。如果我手动设置图像的宽度/高度属性，而不是使用变换，我可以使用这种方法。