CSS 图片廊
以下是一份关于 CSS 图片廊（Image Gallery） 的中文讲解与示例，涵盖常见布局、响应式设计、悬停效果，以及纯 CSS 灯箱（Lightbox）实现思路。
一、基本网格布局（Grid）
利用 CSS Grid 快速搭建等宽等高或瀑布流式的图片廊。
HTML 结构
<div class="gallery-grid">
<div class="item"><img src="img1.jpg" alt=""></div>
<div class="item"><img src="img2.jpg" alt=""></div>
<div class="item"><img src="img3.jpg" alt=""></div>
<!-- 更多 .item -->
</div>
CSS 样式
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-gap: 10px;
}
.gallery-grid .item {
overflow: hidden;
}
.gallery-grid .item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.3s;
}
.gallery-grid .item:hover img {
transform: scale(1.1);
}
auto-fill+minmax：自动填满行，高度自适应。object-fit: cover：保持图片比例填满容器，不变形。- 悬停放大效果：
transform: scale(1.1)。
二、弹性盒子布局（Flex）
Flex 也能实现简单的响应式图片廊。
CSS 示例
.gallery-flex {
display: flex;
flex-wrap: wrap;
margin: -5px;
}
.gallery-flex .item {
flex: 1 0 21%; /* 约 5 列布局 */
margin: 5px;
overflow: hidden;
}
.gallery-flex .item img {
width: 100%;
display: block;
transition: opacity 0.3s;
}
.gallery-flex .item:hover img {
opacity: 0.8;
}
flex: 1 0 21%：基础宽度 21%，可增长不收缩，五栏左右。- 外层负边距＋内层正边距，保持间距一致。
三、瀑布流布局（Masonry）
纯 CSS 无法自动错位排版，但可用列（column）模拟简单瀑布流：
.masonry {
column-count: 3;
column-gap: 10px;
}
.masonry .item {
break-inside: avoid;
margin-bottom: 10px;
}
.masonry .item img {
width: 100%;
display: block;
}
column-count：定义列数，图片按列填充，高度自动错位。break-inside: avoid：避免元素被拆分到多列。
四、响应式优化
在不同视口下调整列数或每项宽度：
@media (max-width: 1024px) {
.gallery-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
.gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.gallery-grid { grid-template-columns: 1fr; }
}
或在 Flex 布局中调整 flex-basis：
@media (max-width: 600px) {
.gallery-flex .item { flex: 1 0 46%; }
}
@media (max-width: 400px) {
.gallery-flex .item { flex: 1 0 100%; }
}
五、图片悬停叠加文字与按钮
.item {
position: relative;
}
.item .overlay {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0,0,0,0.5);
color: #fff;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 0.3s;
}
.item:hover .overlay {
opacity: 1;
}
<div class="item">
<img src="img1.jpg" alt="">
<div class="overlay">查看详情</div>
</div>
六、纯 CSS 灯箱（Lightbox）示例
利用隐藏的复选框或 :target 伪类实现无 JS 灯箱。
HTML（:target 方案）
<div class="gallery-grid">
<a href="#img1"><img src="thumb1.jpg" alt=""></a>
<!-- 更多缩略图 -->
</div>
<div id="img1" class="lightbox">
<a href="#" class="close"></a>
<img src="img1_large.jpg" alt="">
</div>
CSS
.lightbox {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.8);
display: none;
justify-content: center;
align-items: center;
z-index: 100;
}
.lightbox img {
max-width: 90%;
max-height: 90%;
}
.lightbox:target {
display: flex;
}
.lightbox .close {
position: absolute;
top: 20px; right: 20px;
width: 30px; height: 30px;
background: #fff;
text-decoration: none;
font-size: 24px;
line-height: 30px;
text-align: center;
border-radius: 50%;
}
- 缩略图链接到对应
#id，打开时:target触发显示灯箱。 - 点击关闭按钮（链接到
#）回到顶部，隐藏灯箱。
七、最佳实践与注意事项
- 图片优化：使用合适尺寸与格式（WebP/AVIF）减少加载。
- 懒加载：给
<img loading="lazy">提升性能。 - 无障碍：为
alt属性添加描述，灯箱关闭按钮加aria-label。 - 兼容性：Grid、column 或
:target在老旧浏览器需谨慎；可降级为 Flex 或 JS。 - 响应式：始终测试不同设备，确保间距、列数、文字大小合适。
这样，你即可快速搭建出样式丰富、响应式良好的纯 CSS 图片廊。如需更多交互（如滑动翻页、手势支持）或与框架（React/Vue）结合的示例，也可以告诉我！