无论桌面浏览器尺寸如何，始终显示图像

Question

对于下面的图像，无论桌面窗口大小如何，我都必须始终显示整个背景图像，并始终确保文本布局保持不变，即，按钮始终位于该部分的底部，并且没有下方有一个大的蓝色缝隙。

*请注意，我的图像只是一个例子，白色矩形确实是产品的图片，但由于无法发布此类照片而将其删除。

我如何才能最好地做到这一点？这种在不同的桌面浏览器屏幕上保持相同外观的现代Web设计确实让我感到困扰，因为我使用的方法意味着设计在不同的浏览器屏幕上不一致，即，白色矩形被剪切在底部或文本内容高度对于蓝色部分的高度来说太小了，我们在它下面有一个很大的蓝色间隙。

我尝试过的技术：

• 使用bootstrap 3.3行（网站没有使用此版本的库），其中包含2列，其尺寸分别为3/12和9/12。此方法有效，但有时当我真的希望它在垂直方向上均匀分布时，在文本内容（按钮）下会有一个很大的蓝色空白。
• 使该部分具有CSS背景图像。将图像设置为“封面”。这将导致某些桌面窗口尺寸中白色矩形的底部被剪切。

关于如何最好地使用CSS3，Bootstrap 3.3或其他方法进行设计的任何建议？

.blue-section {
  background-color: #1caaf2;
  color: #fff;
  padding-top: 10px;
  padding-bottom: 10px;
}

.blue-section h1,
.blue-section h2,
.blue-section h3,
.blue-section h4,
.blue-section h5,
.blue-section p {
  color: #fff;
}

.blue-bk {
  background: url('https://i.stack.imgur.com/Sgm8G.png') !important;
  -webkit-background-size: contain !important;
  -moz-background-size: contain !important;
  -o-background-size: contain !important;
  background-size: 100% !important;
  background-repeat: no-repeat !important;
  width: 100%;
}

.banner-img {
  height: 100%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>


<section class="section-container blue-section">
  <div class="container">
    <div class="row">
      <div class="col-xs-3">
        <img class="img-responsive banner-img" src="https://i.stack.imgur.com/Sgm8G.png" />
      </div>
      <div class="col-xs-9 mht-db-header-information">
        <h1 class=""><strong>Lorem ipsum Lorem ipsum Lorem ipsum </strong></h1>

        <h3>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</h3>

        <div class="text-center">
          <a class="button-primary" href="">Button</a>
        </div>
      </div>
    </div>
  </div>
</section>


<section class="section-container blue-section blue-bk">
  <div class="container">
    <div class="row">
      <div class="col-xs-3">

      </div>
      <div class="col-xs-9 mht-db-header-information">
        <h1 class=""><strong>Lorem ipsum Lorem ipsum Lorem ipsum </strong></h1>

        <h3>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</h3>

        <div class="text-center">
          <a class="button-primary" href="">Button</a>
        </div>
      </div>
    </div>
  </div>
</section>

所有图片：

仅白色矩形（在生产中将是产品的图像）：

我使用的背景图片：