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