html - 背景图片响应高度

Question

我希望我的超大屏幕背景自动调整其高度以适应屏幕分辨率。同时，图片的宽度只会和高度以相同的比例变化，其余的宽度会被隐藏。

例如我有这张图片:

而且它只显示了它的部分高度和宽度。

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