响应高度的背景图像

Question

我希望我的jumbotron背景能够根据屏幕分辨率自动调整其高度。同时，图像的宽度只会以与高度相同的比例变化，其余的宽度将被隐藏。

例如我有这个图片：

它只显示其高度和宽度的一部分。

<div id="j-ricardo" class="jumbotron">
    <div class="container">
        <h1>David Ricardo</h1>
        <p>Najbogatszy ekonomista w historii</p>
    </div>
</div>

<style type="text/css">
    #j-ricardo {
        background-image: url("obrazki/ricardo.jpg");
        background-size: 100% auto;
        height: 15%;
        color: white;
        text-align: center;
    }
</style>

背景大小：包含;这样不起作用（图像重复）。我只想使用HTML和CSS，没有jQuery。

Answer 1

使用包含background-repeat: no-repeat;

的内容