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 电子邮件模板问题 [字体和边框底部]

HTML5 : Make an entire table row clickable without javascript

java - Xpath - 如何获取元素之间包含的数据,而不是元素本身

css - 如何动态删除文本周围的空间?

css - 是否可以使图像始终显示最小高度,同时始终保持最小 100% 宽度?

java - 如何制作带有不包含 ?<id>= 的操作 URL 的 HTML GET 表单?

css - 如何在单行上对齐 2+ <span>

C# 从网络摄像头捕获图像

c++ - Opencv 图像包装器 cpp

html - Firefox 中不同的填充输入和按钮