使用 CSS 的图像网格

在 web 开发中，常常需要使用图像来装饰页面。而图像网格是一种比较常见的图像布局形式，可以方便地展示多张图片。

在这里，我们将介绍如何使用 CSS 创建一个简单的图像网格。

准备工作

首先，我们需要准备一些图片。为了方便起见，我们将使用一些示例图片，你可以通过以下链接找到这些图片：

• 图片 1
• 图片 2
• 图片 3
• 图片 4
• 图片 5
• 图片 6
• 图片 7
• 图片 8

将这些图片保存到你的项目中，以便后续使用。

创建图像网格

我们将使用 CSS 的 grid 属性来创建一个简单的图像网格。首先，我们需要创建一个包含所有图像的容器元素。这里，我们使用一个 div 元素作为容器：

<div class="grid-container">

</div>

然后，我们可以使用 CSS 来为该容器设置 grid 属性：

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
}

在上面的代码中，我们设置了 display 属性为 grid，将该容器元素变成了一个网格容器。接着，我们使用 grid-template-columns 属性来定义容器中列的数量和宽度。这里，我们使用 repeat 函数来创建 4 个等宽的列，每列的宽度设置为 1fr。最后，我们使用 grid-gap 属性为网格中的每个单元格之间添加了 20 像素的间隔。

现在，我们已经成功创建了一个简单的图像网格。接下来，我们需要将图像添加到这个网格中。

向图像网格中添加图片

我们可以使用 HTML 的 img 元素向图像网格中添加图片。我们可以将每个图片都放在一个 div 元素中，再将这些元素添加到网格容器中：

<div class="grid-container">
  <div class="grid-item"><img src="./image1.jpg" alt=""></div>
  <div class="grid-item"><img src="./image2.jpg" alt=""></div>
  <div class="grid-item"><img src="./image3.jpg" alt=""></div>
  <div class="grid-item"><img src="./image4.jpg" alt=""></div>
  <div class="grid-item"><img src="./image5.jpg" alt=""></div>
  <div class="grid-item"><img src="./image6.jpg" alt=""></div>
  <div class="grid-item"><img src="./image7.jpg" alt=""></div>
  <div class="grid-item"><img src="./image8.jpg" alt=""></div>
</div>

在上面的代码中，我们创建了 8 个 div 元素，每个 div 元素中包含一个 img 元素。这些元素都有一个 grid-item 类，在 CSS 中，我们可以为这个类添加样式：

.grid-item {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

在这里，我们设置了每个图像容器元素的宽度和高度都为 100%，并且使用 overflow 属性将图像的溢出部分裁剪掉，以确保每个图像都按比例显示。

最后，我们还需要设置每个 img 元素的宽度和高度，以防止图像失真。这可以使用以下样式完成：

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

在这里，我们设置了每个 img 元素的宽度和高度都为 100%，并使用 object-fit 属性将图像缩放到容器的尺寸和比例，并截断任何多余的部分。

现在，我们已经完成了一个简单的图像网格。整个代码片段如下所示：

<div class="grid-container">
  <div class="grid-item"><img src="./image1.jpg" alt=""></div>
  <div class="grid-item"><img src="./image2.jpg" alt=""></div>
  <div class="grid-item"><img src="./image3.jpg" alt=""></div>
  <div class="grid-item"><img src="./image4.jpg" alt=""></div>
  <div class="grid-item"><img src="./image5.jpg" alt=""></div>
  <div class="grid-item"><img src="./image6.jpg" alt=""></div>
  <div class="grid-item"><img src="./image7.jpg" alt=""></div>
  <div class="grid-item"><img src="./image8.jpg" alt=""></div>
</div>

<style>
  .grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;
  }

  .grid-item {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
</style>

现在，你可以根据自己的需要修改代码，以创建不同的图像网格布局。