Question

我正在使用以下CSS在元素上设置封面背景图片：

.bg {
    background: url(images/kitteh1.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    height: 200px;
}

什么是正确的，仅限CSS的方式，使元素大小与背景图像的大小完全匹配，使得图像首先占据100％的宽度，然后根据需要采用尽可能多的高度以适应原始方面比γ

这是游乐场：http://jsfiddle.net/e5ek812c/

Answer 1

据我所知，CSS永远不会知道图像大小。但是，您可以为图片的比例设置padding-top或padding-bottom（此处宽度为56.25%）。

<强>解释

padding-top，设置为百分比时，使用元素的宽度作为参考（100%）。与height不同。

.a { background-color: #ddd; }
.bg {
    background: url(https://prinzhorn.github.io/skrollr/examples/images/kitteh1.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    padding-top: 56.25%;
}
.c { background-color: #aaa; }

<div class="a">hello</div>
<div class="bg"></div>
<div class="c">bye</div>

动态元素高度以匹配背景封面尺寸

1 个答案:

Updated JS Fiddle