时间戳

首页 > 解决方案 > 响应式图片库 - 缩略图的网格问题

jquery - 响应式图片库 - 缩略图的网格问题

问题描述

我找到了一个响应式图片库的示例，我想在我的网站上实现它：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>

标签： jqueryhtmlcssbootstrap-4

解决方案

我已经在 codepen 中编写了这段代码，希望它是你想要的！如果您想了解更多信息，请告诉我。

描述中的代码是我在第二列图像中用来填充容器并防止拉伸的代码。

链接：Codepen

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

推荐阅读