如何使背景图像居中而不降低其质量？

Question

幻灯片div是轮播的一部分，其图像大小或纵横比不同。我怎么能不管居中大小可能是不失其质量的背景图像？我编写的代码非常适合普通尺寸的图像，但是如果图像较小（30px x 30px），它将被拉伸以匹配div的宽度或高度。

<div class="slide"></div>

.slide {
    width: 100%;
    height: 400px;
    background-image: url('./assets/img4.jpeg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    border: 1px solid red;
}

Answer 1

您可以使用容器（.imagecont）：

.container {
  width: 10em;
  border: 1px solid black;
}

.imagecont {
  position: relative;
  width: 10em;
  height: 10em;
}

img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 10em;
  max-height: 10em;
  margin: auto;
}

<div class="container">
  <div class="imagecont">
    <img src="https://google.com/favicon.ico">
  </div>
  <div class="imagecont">
    <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
  </div>
</div>

---

具有可变宽度的版本（尝试使用鼠标调整容器的大小）

.container {
  border: 1px solid black;
  width: 5em;
  resize: horizontal;
  -moz-resize: horizontal;
  overflow: hidden;
}

.imagecont {
  position: relative;
  height: 10em;
  max-width: 100%;
}

img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}

<div class="container">
  <div class="imagecont">
    <img src="https://google.com/favicon.ico">
  </div>
  <div class="imagecont">
    <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
  </div>
</div>