bootstrap 4 - аранжировать изображения в частности?

Question

Я создал простую страницу в своем Laravel, и на этой странице у меня есть три раздела, в основном navigation, content и footer. Я закончил навигацию и раскладку нижнего колонтитула. В разделе содержимого я sh использую bootstrap для размещения моего макета изображений следующим образом:

Изображение:

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

Я пытался использовать Masonry для CSS, но он не подходит мобильная компоновка отзывчиво. Я пытался использовать bootstrap 4, но выравнивание между IMG3 и IMG4 / 5 слишком далеко друг от друга, и размещение полей не выравнивает их достаточно близко.

Мой код:

@section('content')
<div class="container">

    <div class="row">
      <div class="col-sm">
        <img src="{{asset('/images/Home_Bed.jpg')}}" class="img-fluid custom-position-1" alt="">
      </div>
      <div class="col-sm col-8">
        <img src="//via.placeholder.com/350x150" class="img-fluid custom-position-2" alt="">
      </div>
      <div class="col-sm custom-position-3">
        <img src="{{asset('/images/Home_Kitchen.jpg')}}" class="img-fluid custom-position-3" alt="">
      </div>
    </div>

   <div class="row align-items-end">
      <div class="col col-8">
        <img src="{{asset('/images/Shop_Page.jpg')}}" class=" img-fluid custom-position-4" alt="">
      </div>    
      <div class="col">
        <img src="{{asset('/images/Home_Sofa.jpg')}}"  class="img-fluid custom-position-5" alt="">
      </div>
    </div>
  </div>
@endsection

.row {
  margin-bottom: 30px;
}




.custom-position-1{
 position: relative;
 bottom: -160px;
 left: 50px;
 height:100px;
 object-fit: cover;
}


.custom-position-2{
 position:relative;
 right:100px;
 object-fit:cover;
}


.custom-position-3{
 position: relative;
 bottom: -160px;
 left: 50px;
 height:100px;
 object-fit: cover;
}

.custom-position-4{
 position: relative;
 height: 400px;
 width:800px;
 object-fit: cover;
}




.custom-position-5{

    position: relative;
    height:300px;
 left:50px;
 top: 100px;
 object-fit: cover;
}

Кто-нибудь есть идеи как сделать это хорошо?

Answer 1

Вы ищете такое решение?

Если вы хотите использовать интервалы, используйте классы полей.

img {
  width: 100%;
  height: 100%;
}
[class*="col-"],
.flex-grow-0 {
  border: 1px solid black;
}
.img-fluid {
  padding: 5px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row m-0">
    <div class="col-8 p-0">
      <div class="row m-0">
        <div class="col-6 p-0">
          <img src="http://placehold.it/300x300" class="img-fluid" alt="" />
        </div>
        <div class="col-6 p-0">
          <img src="http://placehold.it/300x300" class="img-fluid" alt="" />
        </div>
        <div class="col-12 p-0">
          <img src="http://placehold.it/300x300" class="img-fluid" alt="" />
        </div>
      </div>
    </div>
    <div class="col-4  p-0 d-flex">
      <div class="d-flex flex-column">
        <div class="flex-grow-0 mt-auto">
          <img src="http://placehold.it/300x500" class="img-fluid" alt="" />
        </div>
        <div class="flex-grow-0">
          <img src="http://placehold.it/400x400" class="img-fluid" alt="" />
        </div>
      </div>
    </div>
  </div>
</div>