正在加载...

CSS 图片库

下拉菜单在链接下嵌套菜单。图片库是另一种组件：便于扫视的平静缩略图网格。统一缩略图尺寸，让行换行，用 object-fit 裁剪，把更深的响应式网格留给接下来的 Flexbox 与 Grid 模块。

图片库工具箱

📊 图片库一览

部件	日常职责
图片库列表	把缩略图排成换行行或网格的容器
缩略图尺寸	共享宽高，让整组看起来整齐
`object-fit: cover`	填满缩略图框，避免难看拉伸
Gap / margin	图片之间的呼吸空间
悬停提示	轻反馈，不让布局跳动
说明文字	可选的 `figure`/`figcaption`，补充含义

使用带有有用 alt 文本的真实 <img>。纯装饰精灵图另有去处 — 图片库通常是内容。

换行的 flex 图片库

带 wrap 的 flex 容器把缩略图列表变成会落到下一行的响应式行。gap 让间距诚实可信。

Flex wrap 图片库

css

.gallery {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
list-style: none;
margin: 0;
padding: 0;
}

共享缩略图框 + cover

给每张图同样的框，再用 cover 裁剪，让竖图与横图共享同一节奏。

定尺寸 cover 缩略图

css

.gallery img {
width: 160px;
height: 120px;
object-fit: cover;
display: block;
border-radius: 0.35rem;
}

Figure 与说明

当标签重要时，用 figure 包裹图片并加上 figcaption。说明文字在缩略图下保持简短。

图片库 figure 说明

css

.gallery figure {
margin: 0;
width: 160px;
}

.gallery figcaption {
margin-top: 0.35rem;
font-size: 0.85rem;
color: #555;
}

柔和的悬停反馈

悬停时略微变暗或变亮。避免巨大的缩放把邻居挤开，除非你仔细规划了堆叠。

缩略图悬停提示

css

.gallery a:hover img {
opacity: 0.88;
outline: 2px solid #0b5fff;
outline-offset: 2px;
}

平静的图片库习惯

统一的缩略图框、wrap + gap、object-fit: cover、有意义的 alt。进阶响应式瀑布流留给接下来的 Flex/Grid 课 — 别把这和下拉菜单混为一谈。

命名的图片库角色

css

.gallery { /* wrapping track */ }
.gallery__item { /* each thumb cell */ }
.gallery__img { /* the img */ }
.gallery__cap { /* optional caption */ }

自己动手

用 .gallery flex wrap 做出带链接的图片列表。
设置共享宽高与 object-fit: cover。
在某一项上加 figure/figcaption。
做柔和的 hover 透明度或描边。
写一句话：Grid 比这个 wrap 草图更能教什么？

常见错误

没有共享框或 object-fit 就混用随意高度
gap 为零，缩略图粘在一起
把图片库当成嵌套下拉菜单
给每个缩略图 absolute，堆成脆弱一堆
有意义的照片留空 alt

小结

图片库是换行排列的整齐缩略图集合
共享尺寸 + object-fit: cover 保持节奏干净
Flex wrap + gap 是平静的入门布局
说明与悬停提示保持可选且轻量
Flexbox/Grid 模块接下来会加深响应式图片库

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓

问题

🎯

70%

及格要求

♾️

∞

时间

🔄

∞

尝试次数

📝 说明

仔细阅读每个问题
为每个问题选择最佳答案
您可以随时重新参加测验
您的进度将显示在顶部

语言