是否可以根据屏幕分辨率居中图像并调整图像大小？

Question

我有一个方形图像（对于Instagram） - 1080x1080像素。

我需要将图像居中并根据分辨率调整图像大小。如果分辨率为1920x1080 - 那么我的图像为1080x1080。

如果分辨率为1280x720 - 我将有720x720。

我试过了：

img {
    display: block;
    margin: auto;
    width: 50%;
}

正常工作以使图像居中 - 但图像无法正确调整大小。

Answer 1

你可以这样做（最低限度）：

html, body {margin: 0; height: 100%}

img {
  display: block; /* removes bottom margin/whitespace */
  margin: 0 auto; /* you probably only want to center it horizontally */
  max-width: 100%; /* horizontally responsive */
  max-height: 100%; /* vertically responsive */
}

<img src="http://placehold.it/1080x1080" alt="img">

Answer 2

如果高度应始终与整个屏幕高度相同，则可以使用height: 100%和width: auto以及margin: 0 auto来水平居中。