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

Question

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

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

什么是使CSS元素尺寸与背景图像完全匹配的正确方法（仅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> 

更新了JS小提琴