Bootstrap：带有响应图像的超大屏幕内的按钮

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>

Bootstrap：带有响应图像的超大屏幕内的按钮

Bootstrap: a button inside a jumbotron with a responsive image

html

css

image

responsive-design

twitter-bootstrap