返回

使用纯 CSS 实现 Google Photos 照片列表布局

前端

引言

Google Photos 是一个流行的照片和视频存储服务，它提供了多种方式来整理和浏览媒体文件。其中一种流行的布局是照片列表，它以垂直列表显示照片缩略图。在这篇文章中，我们将探究如何使用纯 CSS 实现类似的布局。

HTML 结构

首先，我们需要一个包含照片列表的 HTML 结构。我们可以创建一个带有 ul 和 li 元素的无序列表，如下所示：

<ul class="photo-list">
  <li><img src="image1.jpg" alt="Image 1"></li>
  <li><img src="image2.jpg" alt="Image 2"></li>
  <li><img src="image3.jpg" alt="Image 3"></li>
  <li><img src="image4.jpg" alt="Image 4"></li>
</ul>

CSS 样式

接下来，我们使用 CSS 为照片列表添加样式。我们的目标是创建一个垂直列表，其中缩略图大小相同且水平对齐。以下是实现这一目标的 CSS 代码：

.photo-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
}

.photo-list li {
  list-style-type: none;
  width: 100px;
  height: 100px;
  overflow: hidden;
}

.photo-list li img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

效果

应用这些样式后，我们的 HTML 列表将变成一个垂直排列的照片列表。每个缩略图的宽度和高度都为 100px，并且彼此之间有 12px 的间隙。图片会自动调整大小以适应缩略图区域，并使用 object-fit: cover 进行裁剪以确保整个图片可见。

自定义选项

您可以根据需要自定义 CSS 样式以调整照片列表的外观。例如，您可以更改 width 和 height 属性以调整缩略图的大小，或者更改 gap 属性以调整缩略图之间的间距。您还可以使用 background-color 属性添加背景颜色，或使用 border 属性添加边框。

结论

使用纯 CSS 实现 Google Photos 照片列表布局很简单。通过使用 flexbox 和一些额外的样式，我们可以创建出一个灵活且响应式の写真列表，在各种设备上看起来都很棒。本指南提供了基础知识，您可以根据需要对其进行扩展和定制以满足您的特定需求。