Html 如何使用css在不拉伸图像的情况下制作垂直和水平中心？

若我使用css设置宽度和高度（宽度：100%；高度：100%），图像将被拉伸，看起来很难看。

---

如何在不拉伸的情况下填充图像？此外，如何使垂直和水平居中？

仅使用HTML和CSS：

HTML

<div class="fill"></div>

使用

图像所有者的信用 图像来源：

*{
保证金：0；
}
.bg{
宽度：100%；
高度：100vh；
}
.bg img{
对象匹配：覆盖；
宽度：100%；
高度：100vh；
}

---

您需要图像作为背景还是html标记？

.fill {
    overflow: hidden;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-size: cover;
    background-position: center;
    background-image: url('path/to/image.jpg');
}