如何在 Markdown 中将图片宽度分为两等份

在技术文档和商业文档中，并排显示图片具有许多重要优势：

• 对比分析：清晰展示产品前后对比、版本差异和A/B测试结果
• 空间效率：在保持文档结构紧凑的同时节省垂直空间
• 视觉冲击力：将相关图片分组以吸引读者注意
• 专业提升：通过有组织的布局提高文档质量和可信度

1. UI/UX设计：显示模型对比和用户流程差异
2. 数据可视化：展示图表对比和趋势分析结果
3. 产品演示：清晰显示功能前后对比和版本差异
4. 技术文档：并行显示设置屏幕步骤和代码执行结果

<div style="display:flex; gap:20px; align-items:center; justify-content:center; background:#f8f9fa; padding:16px; border-radius:8px;">
  
  <figure style="margin:0; text-align:center;">
    <img src="before-screenshot.png" style="width:50%; max-width:400px; height:auto; border:1px solid #e0e0e0; border-radius:4px; box-shadow:0 2px 4px rgba(0,0,0,0.1);" alt="优化前的界面">
    
    <figcaption style="margin-top:8px; font-size:14px; color:#666;">图1：优化前的界面</figcaption>
  </figure>
  
  <figure style="margin:0; text-align:center;">
    <img src="after-screenshot.png" style="width:50%; max-width:400px; height:auto; border:1px solid #e0e0e0; border-radius:4px; box-shadow:0 2px 4px rgba(0,0,0,0.1);" alt="优化后的界面">
    
    <figcaption style="margin-top:8px; font-size:14px; color:#666;">图2：优化后的界面</figcaption>
  </figure>
</div>

核心优势：

• 响应式设计：自动适应屏幕尺寸
• 精确控制：可详细设置间距、对齐、背景和边框
• 可访问性：通过figure/figcaption标签提供语义结构
• 跨平台兼容性：与几乎所有Markdown渲染器兼容

![优化前的界面](before-ui.png){width=45%} ![优化后的界面](after-ui.png){width=45%}

*图1和图2：用户界面优化对比*

特点：

• 简洁写作：用最少的标记实现最大效果
• 平台支持：在Obsidian、Hugo、Jekyll等引擎中运行
• 易于维护：无需HTML标签，保持Markdown简洁性

```{r layout-comparison, fig.show='hold', fig.width=8, fig.height=5, out.width='45%', fig.cap=c('优化前的图表', '优化后的图表')}
library(ggplot2)

# 数据准备
before_data <- data.frame(x = 1:10, y = rnorm(10, mean = 5, sd = 2))
after_data <- data.frame(x = 1:10, y = rnorm(10, mean = 7, sd = 1))

# 创建图表
p1 <- ggplot(before_data, aes(x, y)) + geom_line(color = "red") + theme_minimal() + ggtitle("优化前")
p2 <- ggplot(after_data, aes(x, y)) + geom_line(color = "green") + theme_minimal() + ggtitle("优化后")

# 并排显示
gridExtra::grid.arrange(p1, p2, ncol = 2)
```

专业功能：

• 自动布局：fig.show='hold'自动并排排列
• 一致大小：out.width参数精确控制宽度
• 标题管理：fig.cap设置单独标题

<div style="display:flex; flex-wrap:wrap; gap:clamp(12px, 2vw, 24px); justify-content:center;">
  
  <div style="flex:1 1 300px; min-width:0;">
    <img src="mobile-view.png" style="width:100%; height:auto; object-fit:contain;">
    
    <p style="text-align:center; margin-top:8px; font-size:clamp(12px, 1.5vw, 14px);">移动视图</p>
  </div>
  
  <div style="flex:1 1 300px; min-width:0;">
    <img src="desktop-view.png" style="width:100%; height:auto; object-fit:contain;">
    
    <p style="text-align:center; margin-top:8px; font-size:clamp(12px, 1.5vw, 14px);">桌面视图</p>
  </div>
</div>

<div role="group" aria-label="界面比较图片">
  
  <figure role="img" aria-labelledby="fig1-caption">
    <img src="before.png" alt="优化前杂乱的界面" style="width:48%;">
    
    <figcaption id="fig1-caption">图1：优化前 - 信息密集</figcaption>
  </figure>
  
  <figure role="img" aria-labelledby="fig2-caption">
    <img src="after.png" alt="优化后有序的界面" style="width:48%;">
    
    <figcaption id="fig2-caption">图2：优化后 - 信息有序且可读性提高</figcaption>
  </figure>
</div>

1. 布局预设对比：

   • 幻灯片模式：用于演示，边距宽大
   • 移动模式：纵向布局，面向社交媒体
   • 聚焦模式：内容重点，适合对比

2. 色彩主题优化：

   • 浅色背景：商业文档、报告
   • 深色背景：演示、演讲
   • 品牌色彩：营销材料

/* 自定义样式示例 */
.image-comparison-container {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}

.comparison-image {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 2px solid #ffffff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.comparison-image:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}

• PNG：高质量且通用，适合所有平台
• SVG：矢量图形，无限缩放，技术文档完美
• WebP：现代格式，文件更小，面向网络

### 新功能仪表板
<div style="display:flex; gap:20px; margin:20px 0;">
  
  <div style="flex:1;">
    <h4>旧仪表板</h4>
    <img src="old-dashboard.png" style="width:100%; border:1px solid #e0e0e0; border-radius:4px;" alt="旧仪表板界面">
    
    <ul style="font-size:14px; color:#666; margin-top:8px;">
      <li>信息分散</li>
      <li>导航不清晰</li>
      <li>响应缓慢</li>
    </ul>
  </div>
  
  <div style="flex:1;">
    <h4>新仪表板</h4>
    <img src="new-dashboard.png" style="width:100%; border:1px solid #e0e0e0; border-radius:4px;" alt="新仪表板界面">
    
    <ul style="font-size:14px; color:#666; margin-top:8px;">
      <li>关键信息一目了然</li>
      <li>直观导航</li>
      <li>实时更新</li>
    </ul>
  </div>
</div>

### 2024年第四季度性能分析
<div style="display:flex; gap:24px; align-items:flex-start;">
  
  <div style="flex:1;">
    <h4>收入趋势</h4>
    <img src="revenue-trend.png" style="width:100%; border:1px solid #e0e0e0; border-radius:4px;" alt="收入趋势图">
    
    <p style="font-size:14px; color:#666; margin-top:8px;">
      实现同比增长120%
    </p>
  </div>
  
  <div style="flex:1;">
    <h4>市场份额</h4>
    <img src="market-share.png" style="width:100%; border:1px solid #e0e0e0; border-radius:4px;" alt="市场份额饼图">
    
    <p style="font-size:14px; color:#666; margin-top:8px;">
      确保35%市场份额
    </p>
  </div>
</div>

1. 图像失真问题：

   • 原因：将不同长宽比的图像强制调整为相同大小
   • 解决方案：使用 object-fit: contain; 保持比例

2. 移动端显示问题：

   • 原因：使用固定宽度
   • 解决方案：将 flex-wrap: wrap; 与 min-width 结合使用

3. 加载速度问题：

   • 原因：直接使用大图像文件
   • 解决方案：优化图像并选择合适的格式

## 可访问性检查清单
✅ 为每个图像设置了适当的alt属性
✅ 颜色对比度符合WCAG标准（4.5:1或更高）
✅ 为屏幕阅读器提供了描述
✅ 支持键盘导航
✅ 高对比度模式下内容可读
✅ 200%屏幕放大时显示正常