将放大效果添加到引导图库-前端问题

Adding zoom in effect to a bootstrap gallery(将放大效果添加到引导图库)

本文介绍了将放大效果添加到引导图库的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想用bootstrap制作一个如下所示的图库： https://mdbootstrap.com/docs/standard/extended/gallery/

一切都正常，但我想给这些图片添加一个悬停效果，所以我把它们都放在不同的容器里，这很管用，但现在图片不再对齐了，因为一些是水平的，另一些是垂直的：/ 有没有人有办法解决这个问题？以下是我的项目代码：

https://codepen.io/emmlll/pen/zYPLWxr

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

.img-gallery {
  overflow: hidden;
}

.img-gallery img {
  transition: all 1.3s ease;
}

.img-gallery:hover img {
  transform: scale(1.2);
}

<head>

  <title>Title</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="event.js"></script>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
  </style>
  <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Playfair+Display" />
  <link rel="stylesheet" href="style.css">
  <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

  <script>
    AOS.init();
  </script>
</head>

<div class="col-xl-12" id="gallery">
  <div class="row">

    <div class="col-lg-4 col-md-12 mb-4 mb-lg-0 ">
      <div class="img-gallery">
        <img src="https://media.istockphoto.com/photos/large-green-cactus-plant-in-a-yellow-ceramic-vase-picture-id118062993?s=612x612" class="w-100 shadow-1-strong rounded-3 " />

      </div>
    </div>

    <div class="col-lg-4 col-md-12 mb-4 mb-lg-0 ">
      <div class="img-gallery ">
        <img src="https://media.istockphoto.com/photos/cactus-plant-with-green-leaves-and-shovels-and-small-yellow-thorns-on-picture-id1012417960?s=612x612" class="w-100 shadow-1-strong rounded-3" />
      </div>
    </div>

    <div class="col-lg-4 col-md-12 mb-4 mb-lg-0 ">
      <div class="img-gallery mb-4">
        <img src="https://media.istockphoto.com/photos/large-green-cactus-plant-in-a-yellow-ceramic-vase-picture-id118062993?s=612x612" class="w-100 shadow-1-strong rounded-3" />
      </div>
    </div>

    <div class="col-lg-4 col-md-12 mb-4 mb-lg-0 ">
      <div class="img-gallery">
        <img src="https://media.istockphoto.com/photos/cactus-plant-with-green-leaves-and-shovels-and-small-yellow-thorns-on-picture-id1012417960?s=612x612" class="w-100 shadow-1-strong rounded-3" />
      </div>
    </div>

    <div class="col-lg-4 mb-4 mb-lg-0" style="display:flex">
      <div class="img-gallery">
        <img src="https://media.istockphoto.com/photos/large-green-cactus-plant-in-a-yellow-ceramic-vase-picture-id118062993?s=612x612" class="w-100 shadow-1-strong rounded-3 " />

      </div>
    </div>

    <div class="col-lg-4 col-md-12 mb-4 mb-lg-0 ">
      <div class="img-gallery">
        <img src="https://media.istockphoto.com/photos/cactus-plant-with-green-leaves-and-shovels-and-small-yellow-thorns-on-picture-id1012417960?s=612x612" class="w-100 shadow-1-strong rounded-3" />

      </div>
    </div>

  </div>
</div>

推荐答案

对于Bootstrap库，您应该将每列的所有图像嵌套在同一列中。每个图像都有一个新的列，这就是将其隔开的地方。如果您检查链接中的示例，您会注意到它的结构是这样的。然后只需将每个图像嵌套在具有悬停效果的img-gallery中。

见下图：

编辑~我不确定您是否想要所列示例中的砖石类型布局。如果这样做，只需将mb-4添加为图像上的类。

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

.img-gallery {
  overflow: hidden;
}

.img-gallery img {
  transition: all 1.3s ease;
}

.img-gallery:hover img {
  transform: scale(1.2);
}

<head>

  <title>Title</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="event.js"></script>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
  </style>
  <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Playfair+Display" />
  <link rel="stylesheet" href="style.css">
  <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

  <script>
    AOS.init();
  </script>
</head>

<div class="col-xl-12" id="gallery">
  <div class="row">

    <div class="col-lg-4 col-md-12 mb-4 mb-lg-0 ">
      <div class="img-gallery">
        <img src="https://media.istockphoto.com/photos/large-green-cactus-plant-in-a-yellow-ceramic-vase-picture-id118062993?s=612x612" class="w-100 shadow-1-strong rounded-3 " />
      </div>
      <div class="img-gallery">
        <img src="https://media.istockphoto.com/photos/cactus-plant-with-green-leaves-and-shovels-and-small-yellow-thorns-on-picture-id1012417960?s=612x612" class="w-100 shadow-1-strong rounded-3" />
      </div>
    </div>

    <div class="col-lg-4 col-md-12 mb-4 mb-lg-0 ">
      <div class="img-gallery ">
        <img src="https://media.istockphoto.com/photos/cactus-plant-with-green-leaves-and-shovels-and-small-yellow-thorns-on-picture-id1012417960?s=612x612" class="w-100 shadow-1-strong rounded-3" />
      </div>
      <div class="img-gallery">
        <img src="https://media.istockphoto.com/photos/large-green-cactus-plant-in-a-yellow-ceramic-vase-picture-id118062993?s=612x612" class="w-100 shadow-1-strong rounded-3" />
      </div>
    </div>

    <div class="col-lg-4 col-md-12 mb-4 mb-lg-0 ">
      <div class="img-gallery mb-4">
        <img src="https://media.istockphoto.com/photos/large-green-cactus-plant-in-a-yellow-ceramic-vase-picture-id118062993?s=612x612" class="w-100 shadow-1-strong rounded-3" />
      </div>
      <div class="img-gallery">
        <img src="https://media.istockphoto.com/photos/cactus-plant-with-green-leaves-and-shovels-and-small-yellow-thorns-on-picture-id1012417960?s=612x612" class="w-100 shadow-1-strong rounded-3" />
      </div>
    </div>


  </div>
</div>

这篇关于将放大效果添加到引导图库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！