Responsive Image Gallery - проблема с эскизами сетки

Question

Я нашел пример адаптивной галереи изображений и хочу внедрить его на своем сайте: https://mobirise.com/bootstrap-gallery/#gallery1-0

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

Изменение размера изображения в редакторе HTML приводит к перекрытию других миниатюр.

.mbr-gallery .mbr-gallery-item {
  position: relative;
  display: inline-block;
  width: 25%;
  cursor: pointer;
}

@media (max-width: 768px) {
  .mbr-gallery .mbr-gallery-item {
    width: 50%;
  }
}

@media (max-width: 400px) {
  .mbr-gallery .mbr-gallery-item {
    width: 100%;
  }
}

.mbr-gallery .icon-focus,
.mbr-gallery .icon-video {
  position: absolute;
  top: calc(50% - 32px);
  left: calc(50% - 24px);
  font-family: 'MobiriseIcons' !important;
  font-size: 3rem !important;
  color: #fff;
  opacity: 0;
  transition: .2s opacity ease-in-out;
  z-index: 5;
}

.mbr-gallery .icon-focus::before {
  content: '\e96b';
}

.mbr-gallery .icon-video::before {
  content: '\e95c';
}

.mbr-gallery .mbr-gallery-item>div:hover .icon-focus,
.mbr-gallery .mbr-gallery-item>div:hover .icon-video {
  opacity: 1;
}

.mbr-gallery .mbr-gallery-item img {
  width: 100%;
  opacity: 1;
  -webkit-transition: .2s opacity ease-in-out;
  transition: .2s opacity ease-in-out;
}

.mbr-gallery .mbr-gallery-item>div:hover img {
  opacity: 1;
}

.mbr-gallery .mbr-gallery-item>div {
  background: #fff;
  display: block;
  outline: none;
  position: relative;
}

.mbr-gallery .mbr-gallery-item .icon {
  -webkit-transform: translateX(-50%) translateY(-50%);
  -webkit-transition: .2s opacity ease-in-out;
  color: #000;
  font-size: 30px;
  height: 69px;
  left: 50%;
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  transition: .2s opacity ease-in-out;
  width: 69px;
}

.mbr-gallery .mbr-gallery-item .icon::after,
.mbr-gallery .mbr-gallery-item .icon::before {
  content: '';
  display: block;
  position: absolute;
  height: 69px;
  width: 1px;
  margin-left: 34.5px;
  background-color: #fff;
}

.mbr-gallery .mbr-gallery-item .icon::after {
  width: 69px;
  height: 1px;
  margin-left: 0;
  margin-top: 34.5px;
}

.mbr-gallery .mbr-gallery-item>div:hover .icon {
  opacity: 1;
}

.mbr-gallery .mbr-gallery-item>div:hover::before {
  opacity: .9;
}

.mbr-gallery .mbr-gallery-item>div:hover .mbr-gallery-title {
  background: transparent !important;
}

<section class="mbr-gallery mbr-slider-carousel cid-r82PWHW6OG" id="gallery1-0">

  <div class="container">
    <div>
      <!-- Filter -->
      <!-- Gallery -->
      <div class="mbr-gallery-row">
        <div class="mbr-gallery-layout-default">
          <div>
            <div>
              <div class="mbr-gallery-item mbr-gallery-item--p1" data-video-url="false" data-tags="Creative">
                <div href="#lb-gallery1-0" data-slide-to="0" data-toggle="modal"><img src="assets/images/gallery02.jpg" alt="" title=""><span class="icon-focus"></span></div>
              </div>
              <div class="mbr-gallery-item mbr-gallery-item--p1" data-video-url="false" data-tags="Animated">
                <div href="#lb-gallery1-0" data-slide-to="1" data-toggle="modal"><img src="assets/images/gallery03.jpg" alt="" title=""><span class="icon-focus"></span></div>
              </div>
              <div class="mbr-gallery-item mbr-gallery-item--p1" data-video-url="false" data-tags="Awesome">
                <div href="#lb-gallery1-0" data-slide-to="2" data-toggle="modal"><img src="assets/images/gallery04.jpg" alt="" title=""><span class="icon-focus"></span></div>
              </div>
              <div class="mbr-gallery-item mbr-gallery-item--p1" data-video-url="false" data-tags="Awesome">
                <div href="#lb-gallery1-0" data-slide-to="3" data-toggle="modal"><img src="assets/images/gallery05.jpg" alt="" title=""><span class="icon-focus"></span></div>
              </div>
              <div class="mbr-gallery-item mbr-gallery-item--p1" data-video-url="false" data-tags="Responsive">
                <div href="#lb-gallery1-0" data-slide-to="4" data-toggle="modal"><img src="assets/images/gallery06.jpg" alt="" title=""><span class="icon-focus"></span></div>
              </div>
              <div class="mbr-gallery-item mbr-gallery-item--p1" data-video-url="false" data-tags="Animated">
                <div href="#lb-gallery1-0" data-slide-to="5" data-toggle="modal"><img src="assets/images/gallery07.jpg" alt="" title=""><span class="icon-focus"></span></div>
              </div>
            </div>
          </div>
          <div class="clearfix"></div>
        </div>
      </div>
      <!-- Lightbox -->
      <div data-app-prevent-settings="" class="mbr-slider modal fade carousel slide" tabindex="-1" data-keyboard="true" data-interval="false" id="lb-gallery1-0">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-body">
              <div class="carousel-inner">
                <div class="carousel-item active"><img src="assets/images/gallery02.jpg" alt="responsive image gallery" title="item 1"></div>
                <div class="carousel-item"><img src="assets/images/gallery03.jpg" alt="responsive image gallery bootstrap" title="item 2"></div>
                <div class="carousel-item"><img src="assets/images/gallery04.jpg" alt="css responsive image gallery" title="item 3"></div>
                <div class="carousel-item"><img src="assets/images/gallery05.jpg" alt="html image gallery code" title="item 4"></div>
                <div class="carousel-item"><img src="assets/images/gallery06.jpg" alt="image gallery html css" title="item 5"></div>
                <div class="carousel-item"><img src="assets/images/gallery07.jpg" alt="responsive image grid" title="item 6"></div>
              </div><a class="carousel-control carousel-control-prev" role="button" data-slide="prev" href="#lb-gallery1-0"><span class="mbri-left mbr-iconfont" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="carousel-control carousel-control-next"
                role="button" data-slide="next" href="#lb-gallery1-0"><span class="mbri-right mbr-iconfont" aria-hidden="true"></span><span class="sr-only">Next</span></a><a class="close" href="#" role="button" data-dismiss="modal"><span class="sr-only">Close</span></a></div>
          </div>
        </div>
      </div>
    </div>
  </div>

</section>

Answer 1

Я написал этот код в codepen, надеюсь, это то, что вы искали! Дайте мне знать, если вам нужна дополнительная информация.

Код в описании - это код, который я использовал во втором столбце изображения, чтобы заполнить контейнер и предотвратить растяжение.

Ссылка: Codepen

.fill{
    height: 100%;
    width: 100%;
    object-fit: cover;
}