引导:具有响应图像的巨型加速器内的按钮

Question

我有一个全宽的巨型加速器，里面有一个响应型的图像(图像本身与屏幕大小成比例)。

<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) */
}

显然，这种方法将内容推入到超大型加速器之外。有什么方法可以在不破坏当前代码的情况下获取内容吗?巨无霸加速器内的图像仍在响应？

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>

​