響應高度的背景圖像

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;