html - Bootstrap : a button inside a jumbotron with a responsive image

标签 html css image twitter-bootstrap responsive-design

我有一个全宽超大屏幕,里面有一个响应图像(图像本身随屏幕尺寸缩放)。

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

显然,这种方法将其中的内容推到超大屏幕之外。有没有什么方法可以在不破坏当前代码的情况下获取其中的内容/超大屏幕内的图像仍然可以响应?

最佳答案

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>

关于html - Bootstrap : a button inside a jumbotron with a responsive image,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30149157/

相关文章:

html - 焦点上的表单字段位置问题

html - CSS变换在鼠标移动时失去悬停状态

html - 我怎样才能将 Logo 部分地放在图像上,然后在图像上放置文本

html - CSS 技巧 : make images load horizontally instead of vertically

html - 使用 AngularJS 和 HTML 5 验证 URL

html - 了解有关 DOM 和脚本执行的 HTTP 请求/响应

javascript - 如何动态添加代码笔嵌入并确保它被渲染?

javascript : image is not loading in internet explorer

html - 需要有关 Bootstrap Pull Push 问题的帮助

image - 我怎样才能在 Flutter 中做一个像 Instagram 一样的图像选择器?