| 1 | <!DOCTYPE html> |
| 2 | <html lang="zh-CN"><head><meta charset="utf-8"><title>Image Single</title> |
| 3 | <link rel="stylesheet" href="../../assets/fonts.css"> |
| 4 | <link rel="stylesheet" href="../../assets/base.css"> |
| 5 | <link rel="stylesheet" id="theme-link" href="../../assets/themes/minimal-white.css"> |
| 6 | <link rel="stylesheet" href="../../assets/animations/animations.css"> |
| 7 | <style> |
| 8 | /* The figure takes whatever height is left after the title — so the slide |
| 9 | holds together at any window height instead of only at 16:9. */ |
| 10 | .fig{display:flex;flex-direction:column;align-items:center;margin-top:22px;flex:1;min-height:0} |
| 11 | .fig .img-frame{aspect-ratio:auto;flex:1;min-height:0;width:min(1040px,100%)} |
| 12 | .fig .img-cap{text-align:center;max-width:70ch} |
| 13 | </style> |
| 14 | </head><body class="single"> |
| 15 | <div class="deck"><section class="slide is-active" data-title="Image Single"> |
| 16 | <p class="kicker">Figure · 01</p> |
| 17 | <h2 class="h2">一张图讲清楚一件事</h2> |
| 18 | <div class="fig anim-fade-up" data-anim="fade-up"> |
| 19 | <figure class="img-frame contain"> |
| 20 | <img src="../../assets/demo-images/shot-ui.svg" alt="产品主界面截图"> |
| 21 | </figure> |
| 22 | <p class="img-cap">图 1 · 新版工作台。左侧是任务流，右侧是实时指标 —— 截图、图表、架构图都用这个版式。</p> |
| 23 | </div> |
| 24 | <div class="notes">单图版式用 <code>.img-frame.contain</code>：不裁剪，整张图完整可见。截图 / 示意图 / 图表一律用这个，不要用 cover。</div> |
| 25 | </section></div> |
| 26 | <script src="../../assets/runtime.js"></script> |
| 27 | </body></html> |
| 28 |