居中背景 Jumbotron 图像并使其具有移动响应性答案

【问题标题】：Center a Background Jumbotron Image and Make it Mobile Responsive居中背景 Jumbotron 图像并使其具有移动响应性
【发布时间】：2017-07-18 06:55:29
【问题描述】：

我一直在努力解决我设法在网站上正确排列的 jumbotron 背景图像，但我似乎无法使其具有移动响应能力。该网站的链接是 puremistdiffusers.com

这是 HTML：

<div class="jumbotron" style="background-image: url(https://puremistdiffusers.com/wp-content/uploads/2017/02/slider-candle-jpeg-dark.jpg); background-repeat: no-repeat;">
    <div class="container">

        <h1 class="text-uppercase">YOUR AROMATHERAPY</h1>
        <p>UP TO 40% OFF ON ALL PRODUCTS</p>

        <a class="btn btn-default btn-inverse btn-lg text-uppercase topbutton" href="https://puremistdiffusers.com/product/" role="button">Shop Now</a>&nbsp;

    </div>
</div>

这是 CSS：

}
.jumbotron {
    background-color: #fff !important;
}
.jumbotron {
    padding-top: 48px;
    padding-bottom: 48px;
    height: 397px !important;
    background-position: center;
    width: 100%;
}
.jumbotron .container {
    max-width: 100%;
}
.jumbotron h1, .jumbotron .h1 {
    color: #fff;
    font-size: 50px !important;
    text-align: center;
}
.jumbotron h1, .jumbotron .h1 {
    color: #fff;
    font-family: "Adobe Garamond Pro", "Adobe Caslon Pro", Helvetica, Arial, sans-serif;
    font-size: 1.5rem;
}
.jumbotron p {
    margin-bottom: 15px;
    font-size: 30px;
    font-weight: 400;
    color: #fff;
    text-align: center;
}
.btn-default.btn-inverse {
    color: #FFFFFF;
    background-color: #162e00;
    border-color: #FFFFFF;
}
.topbutton {
    padding: 1% 6%;
    font-size: 20px;
    line-height: 2.375rem;
    border-radius: 0.1875rem;
    margin-left: 38%;
    margin-top: 3%;
}
.btn:hover{
    background:transparent;
    color:#fff;
}
@media (max-width:768px){
    .jumbotron h1, .jumbotron .h1 {
    color: #fff;
  font-size: 30px !important;
}
.jumbotron p {
  font-size: 17px;
}
.jumbotron {
    height: 259px !important;
}
.btn {
    margin-left: 30%;
}
}
@media (max-width:640px){
    .jumbotron h1, .jumbotron .h1 {
    color: #fff;
  font-size: 20px !important;
}
.jumbotron p {
  font-size: 12px;
}
.jumbotron {
    height: 259px !important;
}
.btn {
    margin-left: 30%;
}
}
@media (max-width:480px){
    .jumbotron h1, .jumbotron .h1 {
    color: #fff;
  font-size: 17px !important;
}
.jumbotron p {
  font-size: 12px;
}
.jumbotron {
    height: 259px !important;
}
.btn {
    margin-left: 30%;
}
}

我尝试了几种不同的技术，这些技术是我在 stackoverflow 上找到的，但我要么让所有东西都在左边对齐而不是居中，要么让所有东西居中但失去移动响应能力。提前致谢。

【问题讨论】：

当我继续时它对我来说显示得很好？
在电脑上显示正常，但在mible上显示不正常

标签： html css mobile responsive-design

【解决方案1】：

好的，添加这行：

.jumbotron {
background-image: url('your image background');
height: 100%;
width: 100%;
background-size: cover;
}

.jumbotron .container {
position: relative;
top:100px;
}

并在 html 中的 head 标记中添加：

<meta name="viewport" content="width=device-width, initial-scale=1">

【讨论】：

这会将图片拉伸到整个网页的宽度，这是不应该的。