html - 我如何水平和垂直居中页面上的图像，除非它太大而不适合？

Question

我正在尝试使用 HTML 和 CSS 实现一个基本的图像查看器，其中图像在页面中保持居中，除非它太大而不适合。在这种情况下，用户应该能够无边距地滚动查看图像的其余部分。如果只有一个维度太大而不适合，则另一个维度保持居中。页面上除图像外没有其他内容。

但是，图像的大小需要通过比例因子来指定，以便我可以相对于其原始大小放大或缩小它。这意味着我不能使用以像素为单位的显式宽度/高度或相对于页面大小调整它的大小。我试过调整它的 transform css 属性，即 transform: scale(2.5) 但这通常会导致图像的顶部被切断。我也尝试过将图像的 display 属性设置为 inline-block 并将其 height 属性设置为 auto 这样我就可以将它的 width 设置为我希望它缩放的百分比，但是我不知道如何按照上一段中的描述让它在页面上居中。

我怎样才能做到这一点？到目前为止，我已经尝试了大约十几种不同的方法来使页面上的元素居中，但没有一种方法会导致我所追求的这种行为。例如，我使用 flexboxes 来保持图像水平和垂直居中，但是一旦它变得太高而无法容纳，(再次)图像的顶部就会被切断。

Answer 1

你可以使用 flexbox 和 center with margin 来获得这个:

body {
 min-height:100vh;
 margin:0;
 display:flex;
}
body > img {
 margin:auto;
}

<img src="https://picsum.photos/500/500?image=1069" >

如果你不想滚动应用max-height/max-width:

body {
 height:100vh;
 margin:0;
 display:flex;
}
body > img {
 margin:auto;
 max-width:100%;
 max-height:100%;
}

<img src="https://picsum.photos/500/500?image=1069" >