我想知道 CSS 中是否有任何方法可以使背景图像的父 div 适合图像大小?出于某种原因,当我使用时:
背景大小:覆盖;
我的图像变得模糊,因为它正在以某种方式缩放......
最佳答案
有趣。前几天我开始写一篇关于相关想法的文章。您可以相当轻松地做到这一点,但这是违反直觉的。
我刚刚拼凑了一个 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;
}
您可以根据需要调整它。我将其设置为绝对居中的内容。
padding 和 margins 需要一个共同的引用来保持一致性,这个引用就是父元素的宽度。首先是视口(viewport),然后是主体,等等。每个元素都引用其父元素的宽度来确定其自己的边距和填充。
如果您通过一些数学计算知道背景图像的纵横比,则可以利用它(或者如果您愿意并且不需要,可以使用 calc()
支持 Opera Mini)。
将图像的高度除以宽度。在我的示例中,图片的高度是宽度的 56.75%。
然后我们可以获取该数字并将其应用于 padding-top
或 padding-bottom
,并且随着父级缩放,子级中的填充将缩放它,保持纵横比。
如果你想把东西放在那个 div 中,你要么必须做一些烦人的数学运算(从填充中减去子元素的高度——该死!),要么你可以绝对定位一个子元素 div 来保存内容.
在这一点上,根据您的需求和目标,有很多尝试和定制。
需要注意的是内容很容易溢出,因此您需要做好规划,并可能设置一个最小高度来缓解这种情况。
关于css - 使背景图像父 div 适合图像大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35463001/