Css 简明教程

CSS - Image Gallery

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

CSS图像画廊通常用于网站中以一种赏心悦目的方式显示产品、产品组合或其他视觉内容。

要创建一个简单的图像画廊，可以按照以下步骤操作：

使用 HTML 容器元素，例如 <div> 。
向容器元素添加图像。可以使用 <img> 标签来显示图像。
每张图像都应该包裹在一个 <a> 标签中以使其可单击。
向 div 容器元素中添加 * display: flex* 属性。
添加 * flex-flow: row wrap* 属性，将 flex 容器的方向设置为行。

Simple Image Gallery

以下示例显示了一个简单图像画廊布局，该布局以行的方式显示 −

<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="images/red-flower.jpg" alt="Red Flower">
      <img src="images/white-flower.jpg" alt="White Flower">
      <img src="images/orange-flower.jpg" alt="Orange Flower">
   </div>
</body>
</html>

Image Gallery With a Hover Effect

你可以创建一个具有悬停效果的简单而有效的图像画廊。当用户悬停在图像上时，图像会变大，并添加一个红色的边框。

示例如下：

<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="images/red-flower.jpg" alt="Red Flower">
         <div class="image-description">Red Flower</div>
      </div>
      <div class="image-item">
         <img src="images/see.jpg" alt="White Flower">
         <div class="image-description">See</div>
      </div>
      <div class="image-item">
         <img src="images/orange-flower.jpg" alt="Orange Flower">
         <div class="image-description">Orange Flower</div>
      </div>
   </div>
</body>
</html>

Responsive Image Gallery Using Media Query

你可以使用 CSS 媒体查询来创建一个响应式图像画廊，该画廊会根据屏幕宽度调整内容的大小和格式，从而在不同的设备和屏幕尺寸上提供最佳的观看体验。在较小的屏幕上，图像会更宽、间隔更大。

Syntax

@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>Resize the browser window to see the effect.</h3>
   <div class="image-gallery">
      <div class="image-item">
         <img src="images/red-flower.jpg" alt="Red Flower">
         <div class="image-description">Red Flower</div>
      </div>
      <div class="image-item">
         <img src="images/see.jpg" alt="White Flower">
         <div class="image-description">See</div>
      </div>
      <div class="image-item">
         <img src="images/orange-flower.jpg" alt="Orange Flower">
         <div class="image-description">Orange Flower</div>
      </div>
      <div class="image-item">
         <img src="images/red-flower.jpg" alt="Red Flower">
         <div class="image-description">Red Flower</div>
      </div>
      <div class="image-item">
         <img src="images/see.jpg" alt="White Flower">
         <div class="image-description">See</div>
      </div>
        <div class="image-item">
         <img src="images/orange-flower.jpg" alt="Orange Flower">
         <div class="image-description">Orange Flower</div>
      </div>
   </div>
</body>
</html>

下面的屏幕截图显示了全屏模式下的图像画廊布局：

下面的屏幕截图显示了图像画廊在最大宽度为 800px 的屏幕上显示的方式：

下面的屏幕截图显示了图像画廊在最大宽度为 300px 的屏幕上显示的方式：

CSS Image Gallery With Horizontal Scroll

此示例演示如何使用 * 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="images/red-flower.jpg" alt="Red Flower">
      <img src="images/white-flower.jpg" alt="White Flower">
      <img src="images/orange-flower.jpg" alt="Orange Flower">
      <img src="images/red-flower.jpg" alt="Red Flower">
      <img src="images/white-flower.jpg" alt="White Flower">
      <img src="images/orange-flower.jpg" alt="Orange Flower">
   </div>
</body>
</html>

CSS Image Gallery With Vertical Scroll

以下示例演示如何使用 * 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="images/red-flower.jpg" alt="Red Flower">
      <img src="images/white-flower.jpg" alt="White Flower">
      <img src="images/orange-flower.jpg" alt="Orange Flower">
      <img src="images/red-flower.jpg" alt="Red Flower">
      <img src="images/white-flower.jpg" alt="White Flower">
      <img src="images/orange-flower.jpg" alt="Orange Flower">
   </div>
</body>
</html>

CSS Grid Image Gallery

以下示例演示了一个具有三种不同视图的简单图像画廊：三张图像，两张图像或全宽。
单击其中一个按钮时，画廊将切换到相应的布局。

<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="images/red-flower.jpg" alt="Red Flower">
      </div>
      <div class="image-container">
         <img src="images/white-flower.jpg" alt="White Flower">
      </div>
      <div class="image-container">
         <img src="images/orange-flower.jpg" alt="Orange Flower">
      </div>
         <div class="image-container">
         <img src="images/red-flower.jpg" alt="Red Flower">
      </div>
      <div class="image-container">
         <img src="images/white-flower.jpg" alt="White Flower">
      </div>
      <div class="image-container">
         <img src="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 Tabbed Image Gallery

以下示例创建一个简单的图片库。当您点击一个小图片时，该图片的一个更大版本将会打开−

<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="images/red-flower.jpg" alt="Red Flower" id="red">
      </div>
      <div class="image-container" onclick="opentab('white')">
         <img src="images/white-flower.jpg" alt="White Flower" id="white">
      </div>
      <div class="image-container" onclick="opentab('orange')">
         <img src="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 slideshow

以下示例演示了一个简单的图像幻灯片，带有导航按钮和点以指示当前幻灯片。用户可以单击导航按钮或点在幻灯片中的图像之间切换 −

<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="images/scenery.jpg" alt="Red Flower">
         </div>
         <div class="image-container">
            <img src="images/scenery3.jpg" alt="White Flower">
         </div>
         <div class="image-container">
            <img src="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 Slideshow Gallery

以下示例演示了一个简单的幻灯片库。库中有多个图像，并且一次只显示一张图像。
您可以单击左右箭头来浏览图片。

示例如下：

<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="images/scenery.jpg" alt="Red Flower">
         </div>
         <div class="image-container">
            <img src="images/scenery3.jpg" alt="White Flower">
         </div>
         <div class="image-container">
            <img src="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="images/scenery.jpg" onclick="activeSlides(1)">
      <img class="bottom-img" src="images/scenery3.jpg" onclick="activeSlides(2)">
      <img class="bottom-img" src="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>