Skip to content

幻灯片图片优化

问题分析

您遇到的问题是 Marp 幻灯片中的 SVG 图片在不同窗口大小下显示不一致，主要原因包括：

1. 原始问题

  • 使用视口高度单位 (vh)：max-height: 40vh 导致图片大小随窗口高度变化
  • 缺乏固定尺寸约束：没有设置合适的像素值限制
  • 响应式设计不完善：没有针对不同屏幕尺寸的适配

2. 影响

  • 在大屏幕上图片过大，占据过多空间
  • 在小屏幕上图片过小，难以看清细节
  • 不同设备间显示效果差异很大
  • 演示效果不一致，影响专业性

优化方案

1. CSS 样式优化

我们已经实施了以下优化：

/* 基础图片样式 - 使用固定像素高度确保一致性 */
img, svg {
  max-width: 100%;
  max-height: 450px;  /* 固定最大高度，适合 16:9 幻灯片 */
  height: auto;
  display: block;
  margin: 20px auto;  /* 增加上下边距 */
  object-fit: contain;  /* 保持图片比例 */
}

/* 大图片样式 - 用于重要的架构图 */
.large-image img, .large-image svg {
  max-height: 500px;
  margin: 15px auto;
}

/* 中等图片样式 - 用于流程图 */
.medium-image img, .medium-image svg {
  max-height: 400px;
  margin: 25px auto;
}

/* 小图片样式 - 用于图标或简单示意图 */
.small-image img, .small-image svg {
  max-height: 300px;
  margin: 30px auto;
}

/* 响应式调整 - 在小屏幕上缩小图片 */
@media (max-height: 600px) {
  img, svg {
    max-height: 350px;
  }
  .large-image img, .large-image svg {
    max-height: 400px;
  }
  .medium-image img, .medium-image svg {
    max-height: 320px;
  }
  .small-image img, .small-image svg {
    max-height: 250px;
  }
}

2. 图片分类使用

根据图片重要性和复杂度，使用不同的样式类：

大图片 (.large-image)

适用于：

  • 架构图（如 istio-ambient-layers.svg）
  • 部署模式图（如 istio-data-plane-deployment-modes.svg）
  • 复杂的系统图

使用方法：

<div class="large-image">

![架构图](architecture.svg)

</div>

中等图片 (.medium-image)

适用于：

  • 流程图
  • 流量路径图
  • 交互图

小图片 (.small-image)

适用于：

  • 图标
  • 简单示意图
  • 辅助说明图

3. 优化效果

  • 一致性：所有设备上图片大小保持相对一致
  • 可读性：图片大小适中，细节清晰可见
  • 专业性：演示效果更加统一和专业
  • 响应式：在不同屏幕尺寸下都有良好表现

最佳实践建议

1. SVG 图片优化

  • 确保 SVG 文件包含正确的 viewBox 属性
  • 移除不必要的元数据和注释
  • 使用合适的文字大小，确保在缩放后仍然可读

2. 图片尺寸规划

  • 设计图片时考虑 16:9 幻灯片比例
  • 重要信息放在图片中央区域
  • 避免过小的文字和细节

3. 测试建议

  • 在不同屏幕尺寸下测试显示效果
  • 检查全屏模式和窗口模式的显示
  • 确保在投影仪上的显示效果

4. 维护建议

  • 定期检查图片显示效果
  • 根据反馈调整 CSS 样式
  • 保持图片样式的一致性

技术实现

优化已经应用到：

  • content/zh/slide/beyond-sidecar/slides.marp
  • content/en/slide/beyond-sidecar/slides.marp

关键图片已添加适当的样式类，确保最佳显示效果。