我有一个全宽超大屏幕,里面有一个响应图像(图像本身随屏幕尺寸缩放)。
<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) */
}
显然,这种方法将其中的内容推到超大屏幕之外。有没有什么方法可以在不破坏当前代码的情况下获取其中的内容/超大屏幕内的图像仍然可以响应?
最佳答案
*{
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/