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

我有一个方形图像（instagram）-1080x1080像素

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

如果分辨率为1280x720-我将使用720x720

我试过：

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

---

可以很好地将图像居中-但是图像的大小不能正确调整

如果高度应始终与全屏高度相同，您可以使用

高度：100%

和

宽度：自动

，以及将其水平居中的

边距：0自动

。

您可以这样做（最小值）：

html，正文{margin:0；height:100%}
img{
显示：块；/*删除底部边距/空白*/
边距：0自动；/*您可能只希望将其水平居中*/
最大宽度：100%；/*水平响应*/
最大高度：100%；/*垂直响应*/
}

---

如果您使用背景图像，您可以设置

背景大小：包含（尽可能大，不切割，保持纵横比）示例：hi@Santi！您的解决方案非常适合！但是我现在有个问题。。在桌面ok屏幕上，屏幕是宽的-然后宽度是大的一面。但是，当我在平板电脑或手机上尝试你的解决方案时，高度大于宽度——效果很好，但图像是从右侧剪切的。tks！！所以本质上，你需要图像在任何给定的分辨率下都是最大的，完全可见的正方形？我认为下面的VXp解决方案以及上面的@RolandStarke解决方案都满足了这一要求。我的假设是你总是想缩小宽度。