0
當您調整窗口大小時，第二行中的圖像被向下推並遠離其上方的標題。它應該保持與正上方的標題不變的距離，但也應該保持附着在其行的底部。將背景圖像保持在相對於標題的高度不變
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
您可以查看vmax或vmin單位https://jsfiddle.net/mtd4rpkd/6/或在wh或vw單位中設置高度請參閱https://web-design-weekly.com/2014/11/18/viewport -units-VW-VH-VMIN-VMAX / –