问题
我有一张用户图片,想要随着窗口大小的变化进行缩放,使其高度始终为100%,并且保持图像居中。
示例1
这个示例会随着窗口大小的改变进行缩放,但是高度不会保持在100%,因此底部会被裁剪。
.user {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 0%;
}
示例2
这个示例运行良好,只是当浏览器窗口的宽度小于图片的宽度时,右边会被切掉。
我希望图片被裁剪,但希望左右两侧被同等地裁剪。
.user {
object-position: center;
display: block;
height: 100%;
margin-left: auto;
margin-right: auto;
}
可视化示例
以下是一个示例,展示了当浏览器水平/垂直缩放时我想要图片的显示效果。