<p>用 flexbox 对齐 Fitness Hub 健身图最稳：父容器设 display: flex + flex-wrap: wrap + justify-content: center；子项用 flex: 1 1 calc(33.333% - 1rem) + max-width: 100%；图片 width: 100% + height: auto + object-fit: cover；响应式断点按内容密度设为 32em/48em/64em；必须配 srcset + sizes 确保响应式加载。</p>
用 flexbox 对齐 Fitness Hub 中的健身图
直接用 display: flex 是最稳的方案，比 float 或 inline-block 更可靠，也比 grid 更轻量——尤其当你只关心水平居中、等宽排列或响应式换行时。
常见错误是给父容器加了 flex，但忘了设 flex-wrap: wrap，结果小屏下图片溢出或被压缩变形；或者子项没设 flex-basis 或 max-width，导致大图撑破容器。
- 父容器加
display: flex+flex-wrap: wrap+justify-content: center - 每个图容器（如
<figure>或<div class="fitness-card">）设flex: 1 1 calc(33.333% - 1rem)（三列），并加max-width: 100% - 图片本身用
width: 100%+height: auto，禁用height: 100%——否则会拉伸失真
object-fit: cover 保形裁剪健身主题图
健身图常有强视觉焦点（比如人物肩颈线、器械角度），直接缩放容易切掉关键部位。object-fit: cover 能在保持宽高比前提下居中裁剪，比 background-image + background-size: cover 更语义清晰、更易维护。
注意：IE 不支持 object-fit，如果必须兼容 IE，得 fallback 到 background-image 方案，但要额外写 JS 检测或用 PostCSS 插件补全。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 图片标签必须是
<img>（object-fit对<picture>内部<source>无效） - 务必同时设
width和height（哪怕用aspect-ratio: 4/3），否则cover无参照尺寸 - 避免和
vertical-align混用——它会让基线对齐逻辑失效，出现意外空白
响应式断点怎么配 Fitness Hub 的图列数
别硬套“手机一列、平板两列、桌面三列”这种通用规则。Fitness Hub 的图通常带文字说明，小屏下一列太窄，文字挤成一团；而大屏上三列可能留白太多，四列又让图太小看不清肌肉线条。
实测下来，按内容密度调更靠谱：用 min-width + em 单位（不是 px），优先保证单图最小可读宽度 ≈ 280px（含边距）。
-
@media (min-width: 32em)→ 两列（适合竖屏手机+文字说明） -
@media (min-width: 48em)→ 三列（主流平板横屏） -
@media (min-width: 64em)→ 四列（仅当图本身信息量低、纯图标类健身图才启用） - 所有断点统一用
gap: 1rem，不用margin模拟间隙——后者在 flex wrap 下易错乱
为什么 srcset + sizes 必须配 Fitness 主题图
健身图体积大（常 >500KB），不配响应式图片加载，用户滑到页面底部才发起高清图请求，卡顿明显；更糟的是，移动端加载了桌面尺寸图，浪费流量还拖慢 LCP。
错误做法是只写 srcset 不写 sizes，浏览器无法判断视口内图片占宽，大概率选错资源；或者把 sizes 写成固定值如 "100vw"，忽略 sidebar 或 margin 导致误判。
-
sizes值必须匹配 CSS 中该图的实际显示宽度，例如：sizes="(max-width: 48em) 90vw, (max-width: 64em) 45vw, 30vw" -
srcset至少提供 1x / 2x 两档，如：fitness-squat-400w.jpg 400w, fitness-squat-800w.jpg 800w - 不要依赖
<picture>切换格式（如 webp），除非你已用 JS 检测支持并动态插入——否则多数 CDN 会直接忽略<source>的type属性
最易被忽略的是：所有 Fitness Hub 的图都得走同一套 srcset 规则，不能有的写、有的不写——否则混合加载下，LCP 计算会漂移，影响核心指标。
