Question

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

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

我尝试了width属性和background-size选项，其值覆盖/包含。但是没有用。具有包含值，可以在移动设备上看到完整图像，但是图像上方和下方都有巨大的空白（大约100 px）。

以下是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;
}

我不需要横幅标题，因此可以将其删除。...

感谢您的宝贵帮助。

示例JSFIDDLE

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

Answer 1

您尝试过

这可能是工作

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

1 个答案: