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

【问题标题】：How to make vertical and horizontal center without stretching image with css?如何在不使用css拉伸图像的情况下使垂直和水平居中？
【发布时间】：2021-02-23 11:42:00
【问题描述】：

如果我使用 css (width:100%; height:100%) 设置宽度和高度，图像会被拉伸，看起来很难看。如何在不拉伸的情况下填充图像？还有，如何使垂直和水平居中？

【问题讨论】：

你需要图片作为背景还是 html 标签？

标签： html css sass less stretch

【解决方案1】：

仅使用 HTML 和 CSS：

HTML

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

CSS

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

【讨论】：

【解决方案2】：

使用

感谢图片所有者图片来源：https://imgur.com/gallery/ow0qD

* {
  margin: 0;
}

.bg {
  width: 100%;
  height: 100vh;
}

.bg img {
  object-fit: cover;
  width: 100%;
  height: 100vh;
}

<body>
  <div class="bg"><img src="https://i.imgur.com/PLZJasi.jpg"></div>

【讨论】：