在仅由图像组成的网页html，css上，使图像适合视口并在水平和垂直方向上居中

Question

这是一个非常简单的一次性网页，所以内联CSS比适当/漂亮的CSS更受欢迎。用例非常简单：拍摄大图像(图像宽 2100 像素，高 3000 像素(，并确保它始终调整为 90% 视口大小，并且无论视口大小如何，图像始终垂直和水平居中。需要是一个纯粹的HTML/CSS解决方案(没有javascript/jquery(。该页面不包含除这些图像(包装在<a href>标签中并链接到另一个页面(之外的其他内容。

我一直在对position:absolute、表格、div 等进行各种变体的黑客攻击，但似乎无法将符合我的用例的东西放在一起。

Answer 1

只需将它们绝对放置为 0 表示所有边，并将边距设置为自动。您可能需要在周围的链接(或通常是最外层的内联元素(上设置此设置。如果真的有必要，内联这个没有问题，虽然不推荐。

img {
max-width: 90vw;
max-height: 90vh;

position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;

margin: auto;
}

<img src="http://via.placeholder.com/2100x3000">