Растянуть картинку до конца экрана в Bootstrap

[EvilNeighbor]

Добрый вечер, подскажите пожалуйста как реализовать такую структуру(как на картинке)

Скрытый текст

 

при помощи bootstrap. Есть container и есть row, в них два col-lg-6, как сделать чтобы картинка растягивалась на всю ширину до конца экрана? если ее просто поместить в col-lg-6 то она и займет пространство этого блока а надо чтобы было до конца экрана по ширине, и также со второй картинкой , чтобы она начиналась с начала экрана.

Есть код и вот что из этого вышло(на другой картнке)

Скрытый текст

  <div class="news-wrap">
    <div class="container">
      <div class="row ">
        <div class="col-lg-6">
          <div class="news-1">
            Текст
          </div>
        </div>
        <div class="col-lg-6">              
            <img src="img/Wewe.png" alt="">
        </div>
      </div>       
    </div>
  </div

NEWS-WRAP чтобы задать фон на вю ширину. Помогите кто может, за ранее спаисбо

 

Edited January 18, 2018 by EvilNeighbor

[vladmih]

каждому row прописывать бэкграунд двойной с цветом и картинкой, позиционировать картинку в правую сторону, и делать ширину 50%.
Будет и вообще будет ли адаптация к мобильным устройствам?

[EvilNeighbor]

Да, адаптация будет, я не совсем понял как это сделать? для row( он ведь в контенере находится) а у контейнера осттупы по бокам?А container-fluid не хочется использовать

 

 

Edited January 19, 2018 by EvilNeighbor

[Pers]

Может Padding: 0px; для всех col-sm-6. B картинкам class="img-responsive";

 

[vladmih]

В 19.01.2018 в 19:19, EvilNeighbor сказал:

Да, адаптация будет, я не совсем понял как это сделать? для row( он ведь в контенере находится) а у контейнера осттупы по бокам?А container-fluid не хочется использовать

Как я понимаю, у вас картинки не зависимы от сетки, она тупо должна быть у вас в половину от экрана, а слева фон на котором будет текст
 

У вас каждая строка это row, ему прописывайте фон и картинку через css, картинку позиционируйте вправо и дайте ей размер в 50% по ширине

А текст оставьте как было, а колонку с картинкой уберите,

Как я понимаю, если вы не хотите использовать флуид контейнер, у вас контент будет в центре, а картинка должны быть в половину от экрана... Соответственно, вам нужно ее из row col-6 вытаскивать

[EvilNeighbor]

Извиняюсь, что пропал, но все равно не понял  как это сделать. Вот на картинке пример еще один, кривыми это обоазнчены отступы у контэйнера,верхний текст это row with col-md-5, дальши снищзу идет еще один row и он уже поделен на 2 col-md, так вот как мне задать задний фон у второго кола чтобы он был до конца экрана, это с позиционированием что то надо делать?

background-color я то задаю, но он только для кола и будте действоать, если задать для контенера то тоже, там оступы по краям? помогите плиз)

 

Скрытый текст

[vladmih]

 

Если вам нужно, чтоб было изображение в разметке <img>, просто вставляете изображение в бокс или row, делаете его абсолютным и вытягиваете его в 50% ширины, но главной чтоб относительное было прописано у box!!! и будет то же самое...
можете для картинки потом прописать object-fit, если че... Почитаете для чего...

Edited February 7, 2018 by vladmih