适合背景图像父div到图像大小

时间:2016-02-17 16:58:24

标签: css background-size

我想知道CSS中是否有任何方法可以将背景图像的父div与图像大小相匹配?出于某种原因,我使用:

background-size:cover;

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

2 个答案:

答案 0 :(得分:1)

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

我刚刚把codepen demo扔了。这是相关的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-toppadding-bottom,并且当父级缩放时,子级中的填充将随之缩放,保持宽高比。

如果你想把东西放在那个div中,你要么必须做一些讨厌的数学运算(从填充中减去孩子的高度 - blech!),或者你可以绝对定位一个子div来保存内容

此时,根据您的需求和目标,有很多游戏和定制。

有一点需要注意的是,内容很容易溢出,所以你想要做好计划,并可能设置一个最小高度来缓解这一点。

答案 1 :(得分:0)

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