横幅图像在移动设备上无响应

Question

我有带有折叠/打开选项的垂直侧菜单栏。当我们关闭侧边栏时，滑块图像会相应地调整大小并占据屏幕的整个宽度。它在桌面上运行良好。

但在移动设备上，未显示完整的横幅图像。显示了图像的某些部分。我想调整图像大小并显示完整图像而不是它的一部分。

我已尝试使用 width 属性、background-size 选项，其值为覆盖/包含。但不工作。使用包含值，可以在移动设备上看到完整的图像，但图像上方和下方有巨大的空白区域（大约 100 像素）。

以下是 html 和 css 代码。

HTML 代码：

 <!-- Banner -->
        <section class="main-banner">
          <div class="container-fluid">
            <div class="row">
              <div class="col-md-12">
                <div class="banner-content">
                  <div class="row">
                    <div class="col-md-12">
                      <div class="banner-caption">
                        <h4>Hello, this is your <em>Website</em> Theme.</h4>
                        <span>AWESOME HTML5 &amp; CSS3 TEMPLATE</span>
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
                        <div class="primary-button">
                          <a href="#">Read More</a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

CSS如下：

/* Banner */

.main-banner .container-fluid {
    padding-left: 0px;
    padding-right: 0px;
    width:100%;
}
.main-banner .banner-content {
    background-image: url(../images/main-banner.jpg);   
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center center;
}

.main-banner .banner-content .banner-caption {
    max-width: 450px;
    background-color: rgba(250,250,250,0.0);
    margin: 50px;
    padding: 50px;
}

.main-banner .banner-content .banner-caption h4 {
    font-size: 38px;
    font-weight: 700;
    color: #31323a;
    letter-spacing: 0.25px;
    margin: 0px;
    opacity:0;
}

.main-banner .banner-content .banner-caption em {
    font-style: normal;
    color: #DB214C;
    opacity:0;
}

.main-banner .banner-content .banner-caption span {
    font-size: 15px;
    color: #aaaaaa;
    letter-spacing: 0.5px;
    display: inline-block;
    margin-top: 20px;
    margin-bottom: 20px;
    opacity:0;
}

.main-banner .banner-content .banner-caption p {
    margin-bottom: 30px;
    opacity:0;
}

我不需要banner-caption，所以可以去掉....

感谢您的宝贵帮助。

示例JSFIDDLE

在这里您可以通过调整预览窗格的大小来查看图像

Answer 1

你试过了吗

@media(max-width:768px){
    .main-banner .banner-content {
    background-image: url(../images/main-banner.jpg);   
    background-repeat:no-repeat;
    background-size:100% 100%;
    background-position:center center;
    }
}

这可能是工作