对齐文本并保留img宽高比

Question

我正在尝试排列图片

上的标题布局

我希望背景图像能够保持每个屏幕尺寸的宽高比，并且文本浮动在底部并留有一些余量。我在下面有以下内容，但问题是文本在某些断点或低于底部的图像下方

CSS

.header {
  background-size:100%;
  background-repeat:no-repeat;
  overflow:hidden;
  height:100%;
  color: $dark;
  .summary{
    text-align:left;
    margin-top:30%;
    margin-bottom:5%;
    margin-left:triple($spacing-unit);
    hr {
      position: relative;
      height:6px;
      background: $green;
      text-align:left;
      border-width: 6px !important;
      width: 130px;
    }
  }
}

HTML

<section id="main" class="no-pad">
    <div class='header' style="background-image: url('http://via.placeholder.com/1280x756')">
      <div class="summary">
        <hr></hr>
        <p class="tagline">BIG TEXT HERE</p>
        <p class="tagline">Smaller text</p>
        <p class="intro">continuing smaller text</p>
      </div>
    </div>
  </section>

Answer 1

通过上述评论（确认为工作答案）：

问题听起来像是由于背景图像本身无法正常工作。试试background-image: cover;