问题

我有一个用户图像，我想通过窗口缩放该图像，以使高度始终为100％，并且图像保持居中。

例子1

此示例随着调整窗口大小而缩放，但高度不会保持在100％，因此会在底部被截断。

.user {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 0%;
}

CodePen示例1

例子2

这个示例非常完美，除了浏览器窗口的宽度小于图像的宽度之外，右侧的内容也被切除。

我确实希望对图像进行裁剪，但是我希望对左右两侧进行均等的裁剪。

.user {
    object-position: center;
    display: block;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}

CodePen示例2

视觉范例

这是当浏览器水平/垂直缩放时如何显示图像的示例。