Bootstrap：一個jumbotron中的響應式圖像按鈕

Question

我有一個完整寬度的jumbotron裏面有一個響應式圖像（圖像本身與屏幕尺寸成比例）。

<div class = 'jumbotron'> 
    <button type= 'button' id="read" class='btn btn-primary'>Button</button> 
</div> 

.jumbotron { 
    background: url('img/Banner-logo5.jpg') no-repeat center center; 
    background-size: contain; 
    background-repeat: no-repeat; 
    width: 100%; 
    height: 0; 
    padding-top: 52.18%; 
    /* (img-height/img-width * width) */ 
    /* (1067/2045 * 100) */ 
} 

很明顯，這種方法將其內部的內容推送到jumbotron之外。有沒有什麼辦法讓它裏面的內容，沒有打破目前的代碼/與jumbotron裏面的圖像仍然是響應？

Answer 1

http://jsfiddle.net/f9tp1et7/

*{ 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 

 
div{ 
 
    width: 100%; 
 
} 
 
div figure{ 
 
    padding-top: 36.56%; /* 702px/1920px = 0.3656 */ 
 
    display: block; 
 
    background: url("https://st.fl.ru/images/landing/bg2.jpg") no-repeat center top; 
 
    background-size: cover; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 

 

 
button{ 
 
    padding: 15px 50px; 
 
    border: 0; 
 
    background: #f00; 
 
    color: #fff; 
 
    cursor: pointer; 
 
    position: absolute; top: 50%; left: 50%; 
 
    -webkit-transform: translate(-50%,-50%); 
 
    -ms-transform: translate(-50%,-50%); 
 
     transform: translate(-50%,-50%); 
 
} 
 
button:hover{ 
 
    background: #c00; 
 
}

<div>  
 
    <figure> 
 
     <button type='button'>Button</button> 
 
    </figure> 
 
</div>