Bootstrap 响应式横幅图像使用视口缩放高度和宽度

如何解决Bootstrap 响应式横幅图像使用视口缩放高度和宽度

在下面的示例 (fairtradetourism.org) 中，当视口（笔记本电脑上的窗口大小）仅变窄时，图像横幅不会缩小。当视口高度减小时，图像横幅才开始缩小（高度和宽度）。

结论是图片横幅在智能手机上占用了太多空间。

我应该更改什么 css 才能更有效地缩小图片横幅？

<header class="container-fluid sticky" id="headerSite">
  <div class="container">
    <nav class="navbar navbar-expand-md navbar-light">
     ...
    </nav>
   </div>
 </header>      
 
 <section class="site-page">
   <div class="container-fluid banner" style="background-image: url('banner.jpg');">
     <div class="container h-100">
       <div class="row h-100 align-items-end">
         <div class="col-12 text-left">
           <div class="row">
             <div class="col-12">
               <h1 class="title">
                 TEXT
               </h1>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
   ...
</section>

和CSS...

.site-page { z-index:10; padding-top:128px; padding-bottom:90px; }

#headerSite {
  z-index:100;
  background-color:white;
}

.sticky {
  position:fixed;
  top:0;
  width:100%;
  z-index:9;
}

.banner {
  height: 50vh;
  min-height: 200px;
  max-height: 400px;
  background-size: cover;
  background-position: left;
  background-repeat: no-repeat;
  margin-bottom:16px;
}