css - 将背景图像保持在相对于标题的恒定高度

Question

当您调整窗口大小时，第二行中的图像被向下推并远离其上方的标题。它应该与其正上方的标题保持恒定的距离，但也应与其行的底部保持连接。

HTML

    <div class="row hero-family">
      <div class="col-sm-12 col-md-12 col-lg-12">
        <div class="container blurb">
          <h1 class="header">Nice big title here</h1>
          <p>More lorem ipsum text. How can I keep the image below at a constant distance from this header, while keeping it attached at the base of this row as well?</p>
          <button type="button" class="btn btn-red">Big long button here</button>
        </div>
      </div>
    </div>
    <div class="row hero-family family-image">
      </div>

CSS

.hero-header h2 {
    margin: 108px 0 30px 0;
    text-align: left;
    font-family: Open Sans;
    font-size: 58px;
    font-weight: 100;
    color: #000;
    width: 43%;
    line-height: 80px;
}
.hero-header p {
    font-size: 18px;
    font-weight: 300;
    width: 40%;
    color: #000;
    text-align: left;
    font-family: 'Open Sans';
    padding-bottom: 36px;

}
.hero-unit {
  background-image: url("/../images/bg.png");
  width: 100%;
  /* height: 584px; */
  background-position: center center;
  background-repeat: no-repeat;
  text-align: center;
  margin: auto;
  padding: 0;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
@media (max-width: 991px){
  .hero-header h2, .hero-header p{
    width: 80%;
  }
}
.hero-header {
    margin-left: -15px;
}
@media (max-width: 540px) {
  .hero-unit {
    height: auto;
  }
}
@media (max-width: 400px) {
  .hero-unit .pull-left {
    display: none;
  }
  .hero-unit .call-us {
    margin-top: 6%;
    background-color: #fff;
    color: #000;
    font-family: 'Open Sans';
    font-weight: 600;
  }
  .hero-unit .fa-phone {
    color: #000;
  }
}
@media (min-width: 376px) {
  .hero-unit .call-us {
    display: none;
  }
  .hero-unit .pull-left {
    display: block;
  }
}
.hero-unit .hero-header {
  margin-left: -15px;
}

.family-image {
  background-image: url("https://s3.us-east-2.amazonaws.com/ftp-site-images/family.png");
  background-color: #eee;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center bottom;
  height: 500px;
}
@media (max-width: 400px) {
  .family-image {
    height: 300px;
  }
}
@media (max-width: 991px) {
  .family-image {
    margin-bottom: 10%;
  }
}

.hero-family {
  background-color: #eee;
  background-color: #eee;
}
@media (max-width: 400px) {
  .hero-family {
    height: 250px;
  }
}
.hero-family .blurb {
  text-align: center;
  width: 76%;
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
  .hero-family .blurb {
    margin-left: -1%;
  }
}
.hero-family .header {
  font-weight: 300;
  color: #ce2523;
  margin: 6%;
  font-size: 53px;
  font-family: 'Open Sans';
}
@media (max-width: 400px) {
  .hero-family .header {
    text-align: center;
    font-size: 28px;
  }
}
@media (max-width: 1199px) {
  .hero-family .header {
    font-size: 36px;
  }
}
.hero-family p {
  font-family: 'Open Sans';
  text-align: center;
  margin: -3%;
  font-size: 18px;
}
@media (max-width: 400px) {
  .hero-family p {
    text-align: center;
    margin-left: 5px;
    margin-right: 5px;
    font-size: 15px;
    padding: 10px 0 10px;
  }
}
.hero-family .btn-red {
  margin-top: 6%;
  font-weight: 400;
}
@media (max-width: 400px) {
  .hero-family .btn-red {
    margin-left: 0%;
  }
}
@media (max-width: 768px){
.hero-header h2, .hero-header p {
    width: 80%;
    text-align: center;
    margin: 0 auto;
}
}

JSFIDDLE:LINK

Answer 1

由于图像随视口(viewport)缩放，因此它不会是固定高度，但您在作为背景图像的元素上有固定高度。您需要使用相对内部填充来匹配图像的纵横比。

从 .family-image 中删除 height: 500px 并添加 padding-bottom: 42.6% (1095/2570 * 100)

https://jsfiddle.net/mtd4rpkd/7/

.hero-header h2 {
    margin: 108px 0 30px 0;
    text-align: left;
    font-family: Open Sans;
    font-size: 58px;
    font-weight: 100;
    color: #000;
    width: 43%;
    line-height: 80px;
}
.hero-header p {
    font-size: 18px;
    font-weight: 300;
    width: 40%;
    color: #000;
    text-align: left;
    font-family: 'Open Sans';
    padding-bottom: 36px;
    
}
.hero-unit {
  background-image: url("/../images/bg.png");
  width: 100%;
  /* height: 584px; */
  background-position: center center;
  background-repeat: no-repeat;
  text-align: center;
  margin: auto;
  padding: 0;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
@media (max-width: 991px){
  .hero-header h2, .hero-header p{
    width: 80%;
  }
}
.hero-header {
    margin-left: -15px;
}
@media (max-width: 540px) {
  .hero-unit {
    height: auto;
  }
}
@media (max-width: 400px) {
  .hero-unit .pull-left {
    display: none;
  }
  .hero-unit .call-us {
    margin-top: 6%;
    background-color: #fff;
    color: #000;
    font-family: 'Open Sans';
    font-weight: 600;
  }
  .hero-unit .fa-phone {
    color: #000;
  }
}
@media (min-width: 376px) {
  .hero-unit .call-us {
    display: none;
  }
  .hero-unit .pull-left {
    display: block;
  }
}
.hero-unit .hero-header {
  margin-left: -15px;
}

.family-image {
  background-image: url("https://s3.us-east-2.amazonaws.com/ftp-site-images/family.png");
  background-color: #eee;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center bottom;
  /*height: 500px;*/
  padding-bottom: 42.6%;
}
@media (max-width: 400px) {
  .family-image {
    height: 300px;
  }
}
@media (max-width: 991px) {
  .family-image {
    margin-bottom: 10%;
  }
}

.hero-family {
  background-color: #eee;
  background-color: #eee;
}
@media (max-width: 400px) {
  .hero-family {
    height: 250px;
  }
}
.hero-family .blurb {
  text-align: center;
  width: 76%;
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
  .hero-family .blurb {
    margin-left: -1%;
  }
}
.hero-family .header {
  font-weight: 300;
  color: #ce2523;
  margin: 6%;
  font-size: 53px;
  font-family: 'Open Sans';
}
@media (max-width: 400px) {
  .hero-family .header {
    text-align: center;
    font-size: 28px;
  }
}
@media (max-width: 1199px) {
  .hero-family .header {
    font-size: 36px;
  }
}
.hero-family p {
  font-family: 'Open Sans';
  text-align: center;
  margin: -3%;
  font-size: 18px;
}
@media (max-width: 400px) {
  .hero-family p {
    text-align: center;
    margin-left: 5px;
    margin-right: 5px;
    font-size: 15px;
    padding: 10px 0 10px;
  }
}
.hero-family .btn-red {
  margin-top: 6%;
  font-weight: 400;
}
@media (max-width: 400px) {
  .hero-family .btn-red {
    margin-left: 0%;
  }
}
@media (max-width: 768px){
.hero-header h2, .hero-header p {
    width: 80%;
    text-align: center;
    margin: 0 auto;
}
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="hero-unit">
  <div class="container">
    <div class="container hero-header">
      <h2>Title text goes here, for you to read</h2>
      <p>This is a bunch of lorem ipsum text to fill up space that will eventually be taken over by real content. Just filler content here, but it seeps into the row below is when resizing.</p>
      <button type="button" class="btn btn-ghost pull-left">contact us</button>
      <button type="button" class="btn btn-ghost call-us">call us 24/7 <i class="fa fa-phone"></i></button>
    </div>
  </div>
  <div class="col-lg-6">
  </div>
</div>

<div class="row hero-family">
  <div class="col-sm-12 col-md-12 col-lg-12">
    <div class="container blurb">
      <h1 class="header">Nice big title here</h1>
      <p>More lorem ipsum text. How can I keep the image below at a constant distance from this header, while keeping it attached at the base of this row as well?</p>
      <button type="button" class="btn btn-red">Big long button here</button>
    </div>
  </div>
</div>
<div class="row hero-family family-image">
  </div>