Bootstrap - как выровнять 5 изображений в разном положении?

Question

Я создал макет для вида и хочу расположить свое изображение следующим образом: [! [Введите описание изображения здесь] [1]] [1]

Я создал свое выравнивание и планирую используйте строку с двумя столбцами, но до сих пор мои две верхние левые картинки, а одна ниже, находятся на большом расстоянии друг от друга, и я не могу заставить его выглядеть как изображение. Два правых изображения также разделены друг от друга.

Ниже мой код:

<section class="learn_more">
    <div class="row">  
            <div class="col-lg-4 col-md-4 col-sm-7 col-xs-7 d-flex ">
                <div class="container">
                <img src="{{asset('/images/Home_Bed.jpg')}}" alt="" style="margin-top:100px; margin-left:20px;" />

                <div class="text-block">
                    <h4>Nature</h4>
                    <p>What a beautiful sunrise</p>
                </div>       
                </div>

            </div>

            <div class="col-lg-3 col-md-3 col-sm-5 col-xs-5">
                <img src="{{asset('/images/Home_Pillow.jpg')}}" alt="" style="margin-top:100px; height:55%" />
            </div>
            <div class="col-lg-5 col-md-3 col-sm-5 col-xs-5" >
                <img src="{{asset('/images/Home_Kitchen.jpg')}}" alt="" style="margin-top:120px; margin-left:50px;" /> 

    </div>



            <div class="col-lg-7 col-md-7 col-sm-5 col-xs-5">
                <img src="{{asset('/images/Shop_Page.jpg')}}" alt="No Logo" style="margin-left:40px; margin-bottom:100px;" />
        </div>




            <div class="col-lg-5 col-md-3 col-sm-5 col-xs-5" >
            <img src="{{asset('/images/Home_Sofa.jpg')}}" alt="" style="width:100%; margin-left:150px;" /> 

             </div>


    </div

Есть ли ошибка, которую я сделал? >

Answer 1

Вы можете сделать что-то подобное, также я рекомендую использовать кладку.

<div class="container">
  <div class="row">
    <div class="col-sm">
      <img src="//via.placeholder.com/350x150" alt="">
    </div>
    <div class="col-sm">
      <img src="//via.placeholder.com/350x150" alt="">
    </div>
    <div class="col-sm custom-position">
      <img src="//via.placeholder.com/350x150" alt="">
    </div>
  </div>

 <div class="row align-items-end">
    <div class="col col-8">
      <img src="//via.placeholder.com/700x300" alt="">
    </div>    
    <div class="col">
      <img src="//via.placeholder.com/350x150" alt="">
    </div>
  </div>
</div>

И CSS:

.row {
  margin-bottom: 30px;
}

*[class*="col"] {
  height: 250px;
  overflow: hidden;
  display: block; 
}

.col-8 {
  height: 350px;
}

*[class*="col"] img {
  width: 100%;
  min-height: 100%;
  display: block;
  object-fit: cover;
}

.custom-position {
 position: relative;
 bottom: -100px;
}

Обратите внимание, что если вы go с этой опцией вы должны соответствовать изображениям с object-fit, чтобы вы могли использовать разные размеры.