CSS - 图片库

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

CSS 图像库通常在网站上使用，以具有视觉吸引力的方式显示产品、作品集或其他视觉内容。

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

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

具有悬停效果的响应式图片库

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

这是一个例子 -

<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/white-flower.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>

使用媒体查询的图片库

您可以使用 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>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/white-flower.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/white-flower.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>