Css 简明教程

CSS - Image Gallery

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

CSS image gallery is a collection of images that is displayed using CSS. CSS can be used to control the layout of the images, their size, spacing, and other visual properties.

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

CSS image galleries are commonly used on websites to display products, portfolios, or other visual content in a visually appealing way.

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

To create a simple image gallery, you can follow these steps:

Use a HTML container element, such as <div>.
Add the images to the container element. You can use an <img> tag to display the images.
Each image should be wrapped in an <a> tag to make them clickable.
Add the display: flex property to the div container element.
Add flex-flow: row wrap property to set the direction of the flex container to row.

Simple Image Gallery

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

The following example shows a simple image gallery layout that is displayed in a row −

<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

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

You can make a simple and effective image gallery with a hover effect. When the user hovers over an image, it will become larger and have a red border added to it.

示例如下：

Here is an example −

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

You can use CSS media queries to create a responsive image gallery that scales and rearranges its content based on the screen width, providing an optimal viewing experience on different devices and screen sizes. On smaller screens, the images will be wider and more spaced apart.

Syntax

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

示例如下：

Here is an example −

<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>

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

The following screenshot shows image gallery layout on full screen mode:

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

The following screenshot shows how an image gallery would be displayed on a screen with a maximum width of 800px:

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

The following screenshot shows how an image gallery would be displayed on a screen with a maximum width of 300px:

CSS Image Gallery With Horizontal Scroll

此示例演示如何使用 * overflow* 属性创建一个具有水平可滚动布局的图像画廊 −

The example shows how to create an image gallery with a horizontal scrollable layout using the overflow property −

<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* 属性创建一个具有垂直可滚动布局的图像画廊 −

The following example shows how to create an image gallery with a vertical scrollable layout using the overflow property −

<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

The following example demonstrates a simple image gallery that has three different views: three images, two images, or full width.
When you click on one of the buttons, the gallery will switch to the corresponding layout.

<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

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

The following example creates a simple image gallery. When you click on a small image, a larger version of the same image will open −

<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

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

The following example demostartes a simple image slideshow with navigation buttons and dots to indicate the current slide. Users can click on the navigation buttons or dots to switch between images in the 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

The following example demonstrates a simple slideshow gallery. The gallery has several images, and only one image is shown at a time.
You can click the left and right arrows to move through the images.

示例如下：

Here is an example −

<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>