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

Question

如果我使用css设置宽度和高度（宽度：100%；height:100%），图像会被拉伸，看起来很难看。如何在不拉伸的情况下填充图像？另外，如何让纵横居中？

Answer 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');
}

Answer 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>

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

How to make vertical and horizontal center without stretching image with css?

html

css

sass

less

stretch