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

由于图像与视口成比例，因此它不是固定高度，但在元素上有一个固定的高度，它是背景图像。您需要使用相对内部填充来匹配图像的纵横比。

从height: 500px移除.family-image并添加padding-bottom: 42.6%（1095/2570 * 100）

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

＆＃13;

.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;
}
}

＆＃13;

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

＆＃13;

Answer 2

这是一个修复：您必须从类.family-image中删除背景位置，并将高度257px设置为它将解决您的问题的类

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

2 个答案: