HTML

    <section id="section-top" class="position-relative">
            <img src="images/banner.jpg" class="img-fluid banner" alt="Responsive image">
            <!-- 手机板图片 -->
            <img src="images/banner-m.jpg" class="img-fluid banner-m" alt="Responsive image">
            
            <div class="container">
                <div class="row banner-logo position-absolute">
                    <div class="col-md-5 d-flex">
                        <a href="https://www.360d.com.tw/"><img src="images/logo.png" alt="360d" class="logo"></a>
                        <a href="#"><img src="images/ashita.png" class="ml-2 ml-md-5 ml-lg-5 logo" alt="明日之团"></a>
                    </div>
                </div>
            </div>
        </section>

 CSS

#section-top .banner {
    width: 100%;
    margin: 0;
    padding: 0 !important;
    /* max-height: 240px; */
    overflow: hidden;
}
/* 手机板图片 */
#section-top .banner-m {
    display: none;
}

.banner-logo {
    left: 5%;
    top: 5%;
}

@media (min-width: 320px) and (max-width: 480px) {
    #section-top .banner {
        display: none;
    }

    #section-top .banner-m {
        display: unset;
        width: -webkit-fill-available;
    }
}

父元素 加上  position: relative;

子元素 加上  position: absolute;  ，可设定最大高度固定 & 外、内间距为 0  ，定义在父元素的相对位置

overflow:hidden;  //自动隐藏超出的文字或图片。

width:fill-available 表示撑满可用空间 (宽)，高度也有此特性，但不常用