css - 使背景图像父 div 适合图像大小

Question

我想知道 CSS 中是否有任何方法可以使背景图像的父 div 适合图像大小？出于某种原因，当我使用：

背景尺寸：封面；

我的图像变得模糊，因为它正在以某种方式缩放......

Answer 1

有趣的。前几天我开始写一篇关于一个相关想法的文章。你可以很容易地做到这一点，但它是违反直觉的。

我只是拼凑了一个codepen 演示。这是相关的CSS：

.bear {
  position: relative;
  width: 100%;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/82724/bear.jpg)
              no-repeat center center;
  background-size: cover;
  padding-top: 56.75%;
}

.text {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

您可以根据需要进行调整。我将其设置为绝对居中的内容。

内边距和边距需要一个共同的参考来保持一致性，而这个参考就是父元素的宽度。首先是视口，然后是身体，等等。每个元素引用其父元素的宽度来确定自己的边距和填充。

calc()如果您通过做一些数学运算知道背景图像的纵横比（或者如果您想要并且不需要支持 Opera Mini，则可以使用），您可以利用它来发挥您的优势。

将高度除以图像的宽度。在我的示例中，图像的高度是宽度的 56.75%。

然后，我们可以将该数字应用到padding-topor padding-bottom，并且随着父级缩放，子级中的填充将随之缩放，保持纵横比。

如果你想把东西放在那个 div 中，你要么必须做一些烦人的数学运算（从填充中减去孩子的高度——blech！），或者你可以绝对定位一个孩子 div 来保存内容。

在这一点上，根据您的需求和目标，有很多游戏和定制。

一个警告是内容很容易溢出，所以你要好好计划，并可能设置一个最小高度来缓解这种情况。

Answer 2

我认为你可以使用 background-size: 100% auto; 这不会扭曲图像...