使容器中的图像填充页面的一半

Question

所以，我有一个问题在谷歌上找不到答案，所以我希望你能在这里帮助我。

我有一个分成两部分的横幅，我希望两个图像中的每一个都向左和向右 - 但文本需要保持在容器大小中。

目前我已经制作了一个带有文本的容器，以及一个带有图像的容器流体，我已经使用 margin-top 属性将它向上移动。这对我不起作用。

看我的例子：

这是我不满意的代码

JSfiddle

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.multiBanner {
  position: relative;
  margin: auto;
  top: 0px;
  left: 0;
  right: 0;
  z-index: 0;
}
@media (max-width: 767px) {
  .multiBanner {
    display: none;
  }
}
.multiBanner .treatment {
  height: 575px;
  border-left: 2.5px solid white;
  background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), url(../img/1.jpeg);
  background-size: cover;
  background-position-y: 65%;
}
@media (max-width: 992px) {
  .multiBanner .treatment {
    height: 650px;
  }
}
.multiBanner .webshop {
  height: 575px;
  border-right: 2.5px solid white;
  background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), url(../img/2.jpeg);
  background-size: cover;
  background-position-y: 87%;
}
@media (max-width: 992px) {
  .multiBanner .webshop {
    height: 650px;
  }
}
.multiBannerText {
  position: absolute;
  z-index: 1;
  margin: auto;
  top: 200px;
  left: 0;
  right: 0;
}
@media (max-width: 767px) {
  .multiBannerText {
    margin-top: -20px;
    position: relative;
    top: 0;
  }
}
.multiBannerText .col-sm-6:first-child {
  padding-right: 50px;
}
@media (max-width: 767px) {
  .multiBannerText .col-sm-6:first-child {
    padding-right: 15px;
    padding: 50px 15px;
    padding-top: 35px;
    background: #D4CEC0;
  }
}
.multiBannerText .col-sm-6:last-child {
  padding-left: 50px;
}
@media (max-width: 767px) {
  .multiBannerText .col-sm-6:last-child {
    padding-right: 15px;
    padding: 50px 15px;
    padding-top: 35px;
    background: #E6E2D9;
  }
}
.multiBannerText h1 {
  font-family: 'Playfair Display', serif;
  color: #333;
  font-size: 44px;
  line-height: 54px;
  margin-top: 0px;
}
@media (max-width: 767px) {
  .multiBannerText h1 {
    font-size: 28px;
    line-height: 38px;
  }
}
@media (min-width: 768px) {
  .multiBannerText h1 {
    color: white;
  }
}
.multiBannerText p {
  margin-bottom: 50px;
}
@media (min-width: 768px) {
  .multiBannerText p {
    color: white;
  }
}
@media (min-width: 768px) {
  .multiBannerText .line {
    background: white;
  }
}
.multiBannerText .cta {
  background: #b9b28c;
  color: white;
  border-color: #b9b28c !important;
}
.multiBannerText .cta:hover,
.multiBannerText .cta:focus,
.multiBannerText .cta:active {
  background: #b9b28c !important;
  border-color: #b9b28c !important;
  color: white !important;
}

<div class="container multiBannerText">
  <div class="row">

    <div class="col-sm-6">
      <h1>Bestil vores unikke hårprodukter i webshoppen</h1>
      <div class="line"></div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat facilisis tellus, vel lobortis ipsum efficitur sed. Mauris interdum elementum dui et dignissim.</p>
      <button type="button" class="btn btn-default cta hvr-float">Gå til webshoppen</button>
    </div>

    <div class="col-sm-6 animated fadeInRight">
      <h1>Markedets bedste hårbehandlinger - dokumenteret</h1>
      <div class="line"></div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat facilisis tellus, vel lobortis ipsum efficitur sed. Mauris interdum elementum dui et dignissim.</p>
      <button type="button" class="btn btn-default cta hvr-float">Sådan foregår behandlingen</button>
    </div>

  </div>
</div>

<div class="container-fluid multiBanner">
  <div class="row">

    <div class="col-sm-6 webshop"></div>
    <div class="col-sm-6 treatment"></div>

  </div>
</div>

Answer 1

这是我针对您的问题的响应式布局版本。

1. 我已将每个文本与其图像放在同一个单元格中。这些单元格是相对定位的。

2. 我使用 col-sm-6 类将每个文本包装到 div 中。我将这些 div 包装到具有固定宽度的容器中。这些容器是绝对定位的。

3. 当屏幕宽度小于 481px 时，文本的每一部分都位于其图像下方。

请查看结果：jsfiddle • codepen

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.col-xs-12 {
  background: #9c6;
  margin-bottom: 12px;
  margin-top: 12px;
  min-height: 200px;
}
.half-left  img,
.half-right img {
  height: auto;
  width: 100%;
}
@media (min-width: 481px) {
  .half-left,
  .half-right {
    overflow: hidden;
    padding: 0;
    position: responsive;
  }
  .half-left  > .container,
  .half-right > .container {
    position: absolute;
    top: 0;
  }
  .half-left  > .container { right: 0;}
  .half-right > .container { left: 0; }
}

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <h2>The beginning</h2>
      <p>... is in the container</p>
    </div>
  </div>
</div>

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 half-left">
      <img src="https://via.placeholder.com/800x600/c69/f9c/?text=Left%20Image" alt="">
    
      <div class="container">
        <div class="row">
          <div class="col-sm-6 col-sm-offset-6">
            <h2>The left half</h2>
            <p>Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
          </div>
        </div>
      </div>
      
    </div>
    <div class="col-sm-6 half-right">
      <img src="https://via.placeholder.com/800x600/69c/9cc/?text=Right%20Image" alt="">

      <div class="container">
        <div class="row">
          <div class="col-sm-6">
            <h2>The right half</h2>
            <p>Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
          </div>
        </div>
      </div>
      
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <h2>The ending</h2>
      <p>... is in the container again</p>
    </div>
  </div>
</div>

Answer 2

在col-sm-6 webshop和col-sm-6处理里面添加一行，使用offset和push来调整列

<div class="container-fluid multiBanner">
    <div class="row">

        <div class="col-sm-6 webshop">
            <div class="row">
                <div class="col-sm-8 col-sm-offset-4">
                <h1>Bestil vores unikke hårprodukter i webshoppen</h1>
                <div class="line"></div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat facilisis tellus, vel lobortis ipsum efficitur sed. Mauris interdum elementum dui et dignissim.</p>
                <button type="button" class="btn btn-default cta hvr-float">Gå til webshoppen</button>
                </div>
            </div>
        </div>
        <div class="col-sm-6 treatment">
            <div class="row">
                <div class="col-sm-8 col-sm-push-1">
                <h1>Markedets bedste hårbehandlinger - dokumenteret</h1>
                <div class="line"></div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat facilisis tellus, vel lobortis ipsum efficitur sed. Mauris interdum elementum dui et dignissim.</p>
                <button type="button" class="btn btn-default cta hvr-float">Sådan foregår behandlingen</button>
                </div>
            </div>
        </div>

    </div>
</div>