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

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：链接

Answer 1

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

从.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>

Answer 2

这是一个修复： 您只需要从类中删除背景位置。家族图像还将高度设置为257px，它将解决您的问题