如何在 CSS 中全屏显示多个图像

在网站开发中，经常需要使用多个图像来达到更好的展示效果。如果想要全屏显示多个图像，CSS 提供了几种实现方式。

方法一：使用 Flex 布局

使用 Flex 布局可以在一个容器中显示多个图像，并让它们平均分布在整个容器中。

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  height: 100vh;
}

.image {
  width: 30%;
  height: 30%;
  margin-bottom: 5%;
}

在这个例子中，.container 是一个 Flex 容器，flex-wrap 属性用于设置当容器中的元素超出容器时，是否换行。justify-content 属性用于设置元素在主轴上的对齐方式，这里设置为让元素平均分布在容器中。align-items 属性用于设置元素在交叉轴上的对齐方式，这里设置为让元素垂直居中。.image 是每个图像元素的样式，这里设置了宽高以及下边距。

方法二：使用 CSS Grid 布局

使用 CSS Grid 布局同样可以让多个图像平均分布在整个容器中，同时可以更灵活地设置每个元素的位置。

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(25%, 1fr));
  grid-template-rows: repeat(auto-fit, minmax(25%, 1fr));
  height: 100vh;
}

.image {
  width: 100%;
  height: 100%;
}

在这个例子中，.container 是一个 CSS Grid 容器，grid-template-columns 和 grid-template-rows 属性用于定义网格布局的列和行。repeat(auto-fit, minmax(25%, 1fr)) 表示自适应布局，当容器宽度增加时，网格布局的列和行数量也随之变化。minmax(25%, 1fr) 表示网格布局的每个单元格最小宽度为 25%，最大宽度为 1fr。.image 是每个图像元素的样式，这里设置了宽高为 100%。

以上就是在 CSS 中全屏显示多个图像的两种方式。您可以选择其中一种或结合使用，根据自己的需求来设计最佳的排版效果。