html - 横幅图片在移动设备上没有响应

Question

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

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

我尝试使用 width 属性，background-size 选项和值 cover/contain。但没有工作。使用 contain 值，可以在移动设备上看到完整图像，但图像上方和下方会有巨大的空白(大约 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;
}

我不需要横幅标题，所以它可以被删除....

感谢您的宝贵帮助。

sample JSFIDDLE

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

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;
    }
}

这可能是工作