在仅包含图像的网页 html、css 上，使图像适合视口并水平和垂直居中

Question

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

我一直在研究 position:absolute、表格、div 等的各种变体，但似乎无法将与我的用例相匹配的东西放在一起。

Answer 1

只需将它们绝对定位，所有边都为 0，并将边距设置为自动。您可能需要在周围的 link（或通常是最外层的内联元素）上设置它。内联没问题，如果真的有必要，但不推荐。

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">

在仅包含图像的网页 html、css 上，使图像适合视口并水平和垂直居中

On a webpage html,css consisting only of an image, fit image to viewport and center horizontally and vertically

html

css

centering