CSS 图片库是使用 CSS 显示的图像集合。 CSS 可用于控制图像的布局、图像的大小、间距和其他视觉属性。

CSS 图片库通常在网站上用于以视觉方式显示产品、产品组合或其他视觉内容。

要创建一个简单的图片库,您可以按照以下步骤操作:

  • 使用 HTML 容器元素,例如 <div> .

  • 将图像添加到容器元素。您可以使用 <img> 标记来显示图像。

  • 每个图像都应包含在 <a> 标记中,以使其可点击。

  • display: flex 属性添加到 div 容器元素。

  • 添加 flex-flow:row wrap 属性,用于将 Flex 容器的方向设置为行。

简单图片库

以下示例显示了一个连续显示的简单图片库布局 -

<html>
<head>
<style>
   .image-gallery {
      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;
      align-items: center;
   }
   .image-gallery img {
      width: 25%;
      height: 250px;
   }
</style>
</head>
<body>
   <div class="image-gallery">
      <img src="/css/images/red-flower.jpg" alt="Red Flower">
      <img src="/css/images/white-flower.jpg" alt="White Flower">
      <img src="/css/images/orange-flower.jpg" alt="Orange Flower">
   </div>   
</body>
</html> 

具有悬停效果的图片库

您可以制作一个简单有效的具有悬停效果的图片库。当用户将鼠标悬停在图像上时,图像会变大并添加红色边框。

这里是一个示例 -

<html>
<head>
<style>
   .image-gallery {
      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;
      align-items: center;
   }
   .image-gallery .image-item {
         width: 30%; 
         text-align: center; 
   }
   .image-gallery img {
      width: 100%; 
      height: 220px; 
      transition: transform 0.2s;
   }
   .image-gallery .image-item:hover {
      transform: scale(1.1);
      border: 3px solid red;
   }
   .image-description {
      margin-top: 10px; 
   }
</style>
</head>
<body>
<h3>Hover over the images to see the effect</h3>
   <div class="image-gallery">
      <div class="image-item">
         <img src="/css/images/red-flower.jpg" alt="Red Flower">
         <div class="image-description">Red Flower</div>
      </div>
      <div class="image-item">
         <img src="/css/images/see.jpg" alt="White Flower">
         <div class="image-description">See</div>
      </div>
      <div class="image-item">
         <img src="/css/images/orange-flower.jpg" alt="Orange Flower">
         <div class="image-description">Orange Flower</div>
      </div>
   </div>   
</body>
</html> 

使用媒体查询的响应式图片库

您可以使用 CSS 媒体查询创建响应式图片库,根据屏幕宽度缩放和重新排列其内容,从而在不同设备和屏幕尺寸上提供最佳观看体验。在较小的屏幕上,图像会更宽且间隔更大。

语法

@media [media query] {
   /* CSS rules to apply if the media query matches */
} 

这是一个示例 -

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
   .image-gallery {
      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;
      align-items: center;
   }
   .image-gallery .image-item {
      width: 30%;
      text-align: center;
   }
   .image-gallery img {
      width: 100%;
      height: 220px;
      transition: transform 0.2s;
   }
   .image-gallery .image-item:hover {
      transform: scale(1.1);
      border: 3px solid red;
   }
   .image-description {
      margin-top: 10px;
   }
   @media only screen and (max-width: 800px) {
      .image-gallery .image-item {
         width: 40%; 
         margin: 20px;
      }
   }
   @media only screen and (max-width: 300px) {
      .image-gallery .image-item {
         width: 100%; 
         margin: 20px;
      }
   }
</style>
</head>
<body>
<h3>调整浏览器窗口大小以查看效果。</h3>
   <div class="image-gallery">
      <div class="image-item">
         <img src="/css/images/red-flower.jpg" alt="Red Flower">
         <div class="image-description">Red Flower</div>
      </div>
      <div class="image-item">
         <img src="/css/images/see.jpg" alt="White Flower">
         <div class="image-description">See</div>
      </div>
      <div class="image-item">
         <img src="/css/images/orange-flower.jpg" alt="Orange Flower">
         <div class="image-description">Orange Flower</div>
      </div>
      <div class="image-item">
         <img src="/css/images/red-flower.jpg" alt="Red Flower">
         <div class="image-description">Red Flower</div>
      </div>
      <div class="image-item">
         <img src="/css/images/see.jpg" alt="White Flower">
         <div class="image-description">See</div>
      </div>
        <div class="image-item">
         <img src="/css/images/orange-flower.jpg" alt="Orange Flower">
         <div class="image-description">Orange Flower</div>
      </div>
   </div>   
</body>
</html> 

具有水平滚动的 CSS 图片库

该示例演示如何使用 overflow 属性 -

<html>
<head>
<style>
   .image-gallery {
      overflow: auto;
      white-space: nowrap;
      padding: 5px;
      background-color: #78e756;
   }
   .image-gallery img {
      width: 25%;
      height: 250px;
      margin: 10px;
   }
</style>
</head>
<body>
   <div class="image-gallery">
      <img src="/css/images/red-flower.jpg" alt="Red Flower">
      <img src="/css/images/white-flower.jpg" alt="White Flower">
      <img src="/css/images/orange-flower.jpg" alt="Orange Flower">
      <img src="/css/images/red-flower.jpg" alt="Red Flower">
      <img src="/css/images/white-flower.jpg" alt="White Flower">
      <img src="/css/images/orange-flower.jpg" alt="Orange Flower">
   </div>   
</body>
</html> 

具有垂直滚动的 CSS 图片库

以下示例演示如何使用 overflow 属性创建具有垂直可滚动布局的图片库 -

<html>
<head>
<style>
   .image-gallery {
      overflow: auto;
      padding: 5px;
      background-color: #78e756;
   }
   .image-gallery img {
      width: 30%;
      height: 250px;
      margin: 10px;   
   }
</style>
</head>
<body>
   <div class="image-gallery">
      <img src="/css/images/red-flower.jpg" alt="Red Flower">
      <img src="/css/images/white-flower.jpg" alt="White Flower">
      <img src="/css/images/orange-flower.jpg" alt="Orange Flower">
      <img src="/css/images/red-flower.jpg" alt="Red Flower">
      <img src="/css/images/white-flower.jpg" alt="White Flower">
      <img src="/css/images/orange-flower.jpg" alt="Orange Flower">
   </div>   
</body>
</html> 

CSS 网格图片库

  • 以下内容示例演示了一个简单的图片库,它具有三种不同的视图:三个图像、两个图像或全宽。

  • 当您单击其中一个按钮时,图库将切换到相应的布局。

<html>
<head>
<style>
   .image-gallery {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
   }
   .image-container {
      width: 30%;
      height: 250px;
      margin: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
   }
   .image-container img {
      width: 100%;
      height: 100%;
      margin: 10px;
   }
   .two-columns .image-container {
      width: 45%;
      margin: 10px;
   }
   .full-width .image-container {
      width: 100%;
      margin: 20px;
   }
   .button-container {
      text-align: center;
   }
   .button-container button {
      background-color: #7dfa2a;
      border: none;
      padding: 10px 20px;  
      margin: 15px;
   }
</style>
</head>
<body>
   <div class="button-container">
      <button onclick="showFourImages()">Three Images</button>
      <button onclick="showTwoImages()">Two Images</button>
      <button onclick="showFullWidth()">Full Width</button>
   </div>

   <div class="image-gallery">
      <div class="image-container">
         <img src="/css/images/red-flower.jpg" alt="Red Flower">
      </div>
      <div class="image-container">
         <img src="/css/images/white-flower.jpg" alt="White Flower">
      </div>
      <div class="image-container">
         <img src="/css/images/orange-flower.jpg" alt="Orange Flower">
      </div>
         <div class="image-container">
         <img src="/css/images/red-flower.jpg" alt="Red Flower">
      </div>
      <div class="image-container">
         <img src="/css/images/white-flower.jpg" alt="White Flower">
      </div>
      <div class="image-container">
         <img src="/css/images/orange-flower.jpg" alt="Orange Flower">
      </div>
   </div>

   <script>
      function showFourImages() {
         document.querySelector(".image-gallery").className = "image-gallery";
      }

      function showTwoImages() {
         document.querySelector(".image-gallery").className = "image-gallery two-columns";
      }

      function showFullWidth() {
         document.querySelector(".image-gallery").className = "image-gallery full-width";
      }
   </script>
</body>
</html> 

CSS 选项卡式图片库

以下示例创建一个简单的图片库。当您单击小图像时,将打开同一图像的较大版本 -

<html>
<head>
<style>
   .image-gallery {
      display: flex;
      justify-content: space-between;
      float: center;
   }
   .image-container { 
      display: flex;
      justify-content: center;
      align-items: center;
      width: 25%;
      height: 250px;
      left: 0;
      top: 0;
   }
   .image-container img {
      width: 200px;
      height: 150px;
      cursor: pointer; 
   }
   .gallery-tab {
      display: none;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
   }
   .tab-content {
      margin: auto;
      display: block;
      width: 80%;
      height: 80%;
   }
   .tab-content img {
      width: 100%;
      height: auto;
   }
</style>
</head>
<body>
   <div class="image-gallery">
      <div class="image-container" onclick="opentab('red')">
         <img src="/css/images/red-flower.jpg" alt="Red Flower" id="red">
      </div>
      <div class="image-container" onclick="opentab('white')">
         <img src="/css/images/white-flower.jpg" alt="White Flower" id="white">
      </div>
      <div class="image-container" onclick="opentab('orange')">
         <img src="/css/images/orange-flower.jpg" alt="Orange Flower" id="orange">
      </div>
   </div>

   <div id="tab" class="gallery-tab">
      <img class="tab-content" id="tabImg">
   </div>

   <script>
      function opentab(imageId) {
         var tab = document.getElementById("tab");
         var tabImg = document.getElementById("tabImg");
   
         tab.style.display = "block";
         tabImg.src = document.getElementById(imageId).src;
      }
   </script>
</body>
</html> 

CSS 幻灯片

以下示例演示了一个简单的图像幻灯片,其中包含导航按钮和点来指示当前幻灯片。用户可以单击导航按钮或点在幻灯片中的图像之间切换 -

<html>
<head>
<style>
   .slideshow-container {
      position: relative;
      width: 100%;
      overflow: hidden;
   }
   .image-gallery {
      display: flex;
      transition: transform 0.5s ease-in-out;
   }
   .image-container {
      width: 100%;
      height: 100%;
   }
   .image-container img {
      width: 100%;
      height: 100%;
   }
   .prev-img, .next-img {
      cursor: pointer;
      position: absolute;
      top: 50%;
      width: auto;
      padding: 16px;
      margin-top: -22px;
      background-color: rgba(0, 0, 0, 0.5);
      color: white;
      font-weight: bold;
      font-size: 18px;
      transition: 0.6s ease;
   }
   .next-img {
      right: 0;
   }
   .prev-img:hover, .next-img:hover {
      background-color: rgba(0, 0, 0, 0.8);
   }
   .dot-container {
      text-align: center;
      margin-top: 20px;
   }
   .custom-dot {
      height: 10px;
      width: 10px;
      margin: 0 5px;
      background-color: #e98a8a;
      border-radius: 50%;
      display: inline-block;
      cursor: pointer;
   }
   .active-dot {
      background-color: #706868;
   }
</style>
</head>
<body>
   <div class="slideshow-container">
      <div class="image-gallery">
         <div class="image-container">
            <img src="/css/images/scenery.jpg" alt="Red Flower">
         </div>
         <div class="image-container">
            <img src="/css/images/scenery3.jpg" alt="White Flower">
         </div>
         <div class="image-container">
            <img src="/css/images/scenery4.jpg" alt="Orange Flower">
         </div>
      </div>
      <a class="prev-img" onclick="slides(-1)">❮</a>
      <a class="next-img" onclick="slides(1)">❯</a>
   </div>
   
   <div class="dot-container">
      <span class="custom-dot" onclick="activeSlides(1)"></span>
      <span class="custom-dot" onclick="activeSlides(2)"></span>
      <span class="custom-dot" onclick="activeSlides(3)"></span>
   </div>

<script>
   var index = 1;
   displaySlides(index);

   function slides(n) {
      displaySlides(index += n);
   }

   function activeSlides(n) {
      displaySlides(index = n);
   }

   function displaySlides(n) {
      var i;
      var allSlides = document.getElementsByClassName("image-container");
      var allDots = document.getElementsByClassName("custom-dot");

      if (n > allSlides.length) {
         index = 1;
      }
      if (n < 1) {
         index = allSlides.length;
      }
      for (i = 0; i < allSlides.length; i++) {
         allSlides[i].style.display = "none";
      }
      for (i = 0; i < allDots.length; i++) {
         allDots[i].className = allDots[i].className.replace(" active-dot", "");
      }
      allSlides[index - 1].style.display = "block";
      allDots[index - 1].className += "active-dot";
   }
</script>
</body>
</html> 

CSS 幻灯片画廊

  • 以下示例演示一个简单的幻灯片画廊。图库中有多张图片,一次仅显示一张图片。

  • 您可以单击左右箭头在图片之间移动。

这是一个例子 -

<html>
<head>
<style>
   .slideshow-container {
      position: relative;
      width: 100%;
      overflow: hidden;
   }
   .image-gallery {
      display: flex;
      transition: transform 0.5s ease-in-out;
   }
   .image-container {
      width: 100%;
      height: 100%;
   }
   .image-container img {
      width: 100%;
      height: 100%;
   }
   .prev-img, .next-img {
      cursor: pointer;
      position: absolute;
      top: 50%;
      width: auto;
      padding: 16px;
      margin-top: -22px;
      background-color: rgba(0, 0, 0, 0.5);
      color: white;
      font-weight: bold;
      font-size: 18px;
      transition: 0.6s ease;
   }
   .next-img {
      right: 0;
   }
   .prev-img:hover, .next-img:hover {
      background-color: rgba(0, 0, 0, 0.8);
   }
   .bottom-img-container {
      text-align: center;
      margin-top: 20px;
   }
   .bottom-img {
      height: 80px; 
      width: 80px; 
      margin: 0 10px; 
      cursor: pointer;
      opacity: 0.5; 
   }
   .bottom-img.current-bottom-img {
      opacity: 1; 
   }
</style>
</head>
<body>
   <div class="slideshow-container">
      <div class="image-gallery">
         <div class="image-container">
            <img src="/css/images/scenery.jpg" alt="Red Flower">
         </div>
         <div class="image-container">
            <img src="/css/images/scenery3.jpg" alt="White Flower">
         </div>
         <div class="image-container">
            <img src="/css/images/scenery4.jpg" alt="Orange Flower">
         </div>
         
      </div>
      <a class="prev-img" onclick="slides(-1)">❮</a>
      <a class="next-img" onclick="slides(1)">❯</a>
   </div>
   
   <div class="bottom-img-container">
      <img class="bottom-img current-bottom-img" src="/css/images/scenery.jpg" onclick="activeSlides(1)">
      <img class="bottom-img" src="/css/images/scenery3.jpg" onclick="activeSlides(2)">
      <img class="bottom-img" src="/css/images/scenery4.jpg" onclick="activeSlides(3)">
   </div>

   <script>
      var index = 1;
      displaySlides(index);

      function slides(n) {
         displaySlides(index += n);
      }

      function activeSlides(n) {
         displaySlides(index = n);
      }

      function displaySlides(n) {
         var i;
         var allSlides = document.getElementsByClassName("image-container");
         var allThumbnails = document.getElementsByClassName("bottom-img");

         if (n > allSlides.length) {
            index = 1;
         }
         if (n < 1) {
            index = allSlides.length;
         }
         for (i = 0; i < allSlides.length; i++) {
            allSlides[i].style.display = "none";
         }
         for (i = 0; i < allThumbnails.length; i++) {
            allThumbnails[i].className = allThumbnails[i].className.replace(" current-bottom-img", "");
            allThumbnails[i].style.filter = "brightness(50%)";
         }
         allSlides[index - 1].style.display = "block";
         allThumbnails[index - 1].className += " current-bottom-img";
         allThumbnails[index - 1].style.filter = "brightness(100%)";
      }
   </script>
</body>
</html>