banner区域图片背景注意点（移动端）

前提导航栏已经采用固定定位布局

如：

.search-index {

    display: flex;

    /* 固定定位跟父级没有关系 它以屏幕为准 */

    position: fixed;

    top: 0;

    left: 50%;

    /* 固定的盒子应该有宽度 */

    -webkit-transform: translateX(-50%);

    transform: translateX(-50%);

    width: 100%;

    min-width: 320px;

    max-width: 540px;

    height: 44px;

    /* pink; */

    background-color: #F6F6F6;

    border-top: 1px solid #ccc;

    border-bottom: 1px solid #ccc;

}

 

 

方法一：banner（focus）背景图父盒子应该加上一个padding-top值

.focus {
    padding-top: 44px;
}

.focus img {
    width: 100%;
}

html代码如下：

<!-- 顶部搜索 -->
    <div class="search-index">
        <div class="search">搜索:目的地/酒店/景点/航班号</div>
        <a href="#" class="user">我 的</a>
    </div>
    <!-- 焦点图模块 -->
    <div class="focus">
        <img src="upload/focus.jpg" alt="">
    </div>

方法二：banner（focus）背景图父盒子设置宽和高

html代码如下：

 <div class="banner">
        <img src="upload/banner.gif" alt="">
    </div>

css如下：

.banner {
  width: 15rem;
  height: 7.36rem;
}
.banner img {
  width: 100%;
  height: 100%;
}