我有一个完整宽度的jumbotron里面有一个响应式图像(图像本身与屏幕尺寸成比例)。Bootstrap:一个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里面的图像仍然是响应?
你可以张贴问题的屏幕截图? –
删除手动添加到jumbotron的css属性,看看是否可以工作 – AdityaParab
也许这样 - http://jsfiddle.net/byLjyug1/或http://jsfiddle.net/ze4Lq1tu/ – Dmitriy