html - 背景图像响应高度

我想让我的巨型背景自动将其高度调整为屏幕分辨率。同时，图像的宽度将仅以与高度相同的比率变化，其余的宽度将被隐藏。

例如，我有此图像：


并且仅显示其高度和宽度的一部分。

<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。

最佳答案

与background-repeat: no-repeat;配合使用