Сделать изображение в контейнере заполнить половину страницы

Question

Итак, у меня есть вопрос, что я не смог найти ответ на Google, поэтому я надеюсь, что вы можете мне помочь здесь.

У меня есть баннер, который разделен на две части, где я хочу, чтобы каждое из двух изображений было полным слева и справа, но текст должен оставаться в размере контейнера.

В настоящий момент я создал контейнер с текстом и контейнерную жидкость с изображениями, где я переместил его с свойством 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. Я завернул каждый текст в div с классом col-sm-6. И я завернул эти divs в контейнеры с фиксированной шириной. Эти контейнеры расположены абсолютно.

3. Когда ширина экрана становится меньше 481 пикселей, каждая часть текста находится под ее изображением.

Пожалуйста, проверьте результат: 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="//placehold.it/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="//placehold.it/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-см-6 интернет-магазин и Col-см-6 лечения, используйте смещение и нажмите, чтобы настроить столбцы

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