Foundation 图片（Thumbnail & 响应式图片）详解（超级完整版，一次讲透）
我们继续你的 Foundation 系列，今天重点讲 图片处理：Thumbnail（缩略图样式）和响应式图片！Foundation 6 没有像 Bootstrap 那样的 .img-responsive（因为现代浏览器默认支持），但提供了超级好用的 .thumbnail 类来美化图片，还结合 Grid、Flex 和 Float 实现完美布局。
1. Thumbnail 基本用法（最常用，加个类就变漂亮）
直接在 <img> 或包裹的 <a> 上加 .thumbnail：
<img class="thumbnail" src="your-image.jpg" alt="描述文字（无障碍必备）">
<!-- 可点击的缩略图（常用于图库） -->
<a href="big-image.jpg" class="thumbnail">
<img src="small-image.jpg" alt="大图预览">
</a>效果：添加边框、阴影、圆角、内边距，hover 时有轻微放大/阴影增强。
2. 响应式图片（Foundation 默认全响应式！）
所有 <img> 自动 max-width: 100%; height: auto; —— 完美适配容器，无需额外类！
如果你想强制居中或控制大小：
<img src="image.jpg" alt="..." style="max-width: 100%; height: auto;">3. 结合 Grid 做图片画廊（真实项目必备）
用 Flex Grid 轻松实现响应式图库：
<div class="grid-x grid-padding-x small-up-2 medium-up-3 large-up-4">
<div class="cell">
<img class="thumbnail" src="img1.jpg" alt="图片1">
</div>
<div class="cell">
<img class="thumbnail" src="img2.jpg" alt="图片2">
</div>
<!-- 更多... -->
</div>- small-up-2：小屏 2 列
- medium-up-3：中屏 3 列
- large-up-4：大屏 4 列
4. 浮动 + 对齐（Float Classes）
快速让图片左浮/右浮，文字环绕：
<img class="float-left thumbnail" src="img.jpg" alt="左浮">
<p>文字会自动环绕在右边...</p>
<img class="float-right thumbnail" src="img.jpg" alt="右浮">
<p>文字会自动环绕在左边...</p>
<img class="float-center thumbnail" src="img.jpg" alt="居中">5. 今天直接给你抄的完整代码（复制就能跑）
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.8.1/dist/css/foundation.min.css">
</head>
<body>
<h3>Foundation 图片 & Thumbnail 全家福</h3>
<!-- 基本 Thumbnail -->
<img class="thumbnail" src="https://via.placeholder.com/400x300" alt="基本缩略图">
<!-- 响应式图库 -->
<div class="grid-x grid-padding-x small-up-2 medium-up-4">
<div class="cell"><img class="thumbnail" src="https://via.placeholder.com/300" alt="1"></div>
<div class="cell"><img class="thumbnail" src="https://via.placeholder.com/300" alt="2"></div>
<div class="cell"><img class="thumbnail" src="https://via.placeholder.com/300" alt="3"></div>
<div class="cell"><img class="thumbnail" src="https://via.placeholder.com/300" alt="4"></div>
</div>
<!-- 浮动示例 -->
<img class="float-left thumbnail" src="https://via.placeholder.com/200" alt="左浮">
<p>这里是环绕文字，这里是环绕文字，这里是环绕文字...</p>
<div class="clearfix"></div> <!-- 清除浮动 -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.8.1/dist/js/foundation.min.js"></script>
<script>$(document).foundation();</script>
</body>
</html>下面给你看真实效果（官方文档和项目中最标准的 Foundation Thumbnail 示例）：
官方文档（最新版）：
- Thumbnail：https://get.foundation/sites/docs/thumbnail.html
- Float Classes：https://get.foundation/sites/docs/float-classes.html
- Flex Grid（推荐用于图库）：https://get.foundation/sites/docs/grid.html
你现在想干嘛？
→ 明天继续讲 Foundation 表格（Table）还是分页（Pagination）？
→ 帮我做一个 3 列响应式图片画廊（带标题和 hover 放大效果）？
→ 给我一个带lightbox的图库代码？
直接回复下一句：
“明天讲 table”
“帮我做图片画廊”
“给我 lightbox 代码”
我立刻给你写好！
