Typora中插入Html语言图片的多种排版方法

c3ecf857-9359-449d-9b49-3e8fba58396e

在 Typora（支持 Markdown + 内嵌 HTML）中，可以通过 HTML、CSS 或 Markdown 扩展写法来实现图片并排、网格布局、浮动、错位等效果。下面给你整理一套实用方法（从简单到高级）👇

✅ 方法一：最简单（HTML + img 横排）

直接用 HTML：

1
2
3
4
5
<p>
<img src="图1" width="30%">
<img src="图2" width="38.9%"> <!--到39就换行了-->
<img src="图3" width="30%"> 
</p>

👉 特点

  • 最容易用
  • 控制宽度即可自动并排
  • 总宽度不要超过 100%（否则会换行）

✅ 方法二：使用 flex（推荐 ✅ 灵活且现代）

1
2
3
4
5
<div style="display: flex; gap: 10px;">
<img src="图1">
<img src="图2">
<img src="图3"> 
</div>

👉 优点

  • 自动均匀排布（但默认原图大小，并排后可能会溢出屏幕）
  • 可设置间距（gap）
  • 可扩展成复杂布局

✅ 方法三：网格布局（Grid）

适合多图规则排列：

1
2
3
4
5
6
7
8
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;">
<img src="图1">
<img src="图2">
<img src="图3"> 
<img src="图4">
<img src="图5">
<img src="图6">
</div>

👉 效果

  • 自动三列（可在repeat中调整）
  • 多图排版很整齐

✅ 方法四：表格布局（兼容性最好）

1
2
3
4
5
6
7
<table>
  <tr>
    <td><img src="图1"></td>
    <td><img src="图2"></td>
    <td><img src="图3"></td>
  </tr>
</table>

👉 特点

  • 简单稳定
  • 适合导出 PDF 时使用

✅ 方法五：图片+文字混排（高级排版）

1
2
3
4
5
6
<div style="display: flex; align-items: center;">
   <style="width:200px; margin-right:10px;">
<img src="图片1" width="30%">
<img src="图片2" width="30%">       
  <p>这里是图片旁边的说明文字，可以写很多内容。</p>
</div>

✅ 方法六：非对称/错位布局（高级）

  1. 左侧大图，右侧竖排两个小图

    1
    2
    3
    4
    5
    6
    7
    <div style="display:flex; gap:10px;">
    <img src="图1" style="width:60%;">
    <div style="display:flex; flex-direction:column; gap:10px; width:40%;">
    <img src="右图1" style="width:100%;">
    <img src="右图2" style="width:100%;">
    </div>
    </div>

  2. 左侧竖排两个小图，右侧大图
    方法一

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <div style="display:flex; gap:10px;">
    <!-- 左侧（两张竖排） -->
    <div style="display:flex; flex-direction:column; gap:10px; width:40%;">
    <img src="左图1" style="width:100%;">
    <img src="左图2" style="width:100%;">
    </div>
    <!-- 右侧大图 -->
    <img src="右图" style="width:60%;">
    </div>

    方法二（#最终采用版本#，算是这几个方案当中效果最好的了）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <div>
    <!-- 左侧两张 -->
    <div style="float:left; width:40%;">
    <img src="图1.jpg" style="width:100%; margin-bottom:10px;">
    <img src="图2.jpg" style="width:100%;">
    </div>
    <!-- 右侧大图 -->
    <div style="float:left; width:60%;">
    <img src="图3.jpg" style="width:100%;">
    </div>
    <div style="clear:both;"></div>
    </div>

👉 效果

  • 左大右小
  • 常见于博客封面

另外还有下面这个版本，最大的好处就是稳定，不过也是不太容易两小一大这种实现方式（可用于左二右二那种情境）

1
2
3
4
5
6
7
8
9
10
<div style="display:flex; gap:10px;">
  <img src="左大图"
       style="width:60%; height:auto;">
  <div style="width:40%; display:flex; flex-direction:column; gap:10px;">
    <img src="右图1"
         style="width:100%; height:auto;">
    <img src="右图2"
         style="width:100%; height:auto;">
  </div>
</div>

✅ 方法七：Markdown + HTML 混合（最实用）

1
2
3
4
5
6
7
<div style="display:flex; gap:10px;">

img1.jpg
!
img3.jpg

</div>

👉 说明

  • 保留 Markdown 写图的习惯
  • 同时用 HTML 控制布局

💡 额外技巧

1️⃣ 控制图片统一高度

✅ 方法一：统一高度（推荐🔥）

1
<img src="xxx.jpg" style="width:100%; height:200px; object-fit:cover;">

✅ 效果

  • 所有图片高度一致 ✅
  • 自动裁剪 ✅
  • 不变形 ✅

👉 最推荐用这个

✅ 方法二：保持完整不裁剪

1
<img src="xxx.jpg" style="width:100%; height:200px; object-fit:contain;">

✅ 效果

  • 不裁剪
  • 可能留白

✅ 方法三：比例法（最优雅✅）

1
2
3
<div style="aspect-ratio: 16 / 9; overflow:hidden;">
  <img src="xxx.jpg" style="width:100%; height:100%; object-fit:cover;">
</div>

✅ 效果

  • 所有图片统一比例（比如16:9）
  • 超专业（博客/封面用）

✅ 方法4：左右拼图统一高度（实测并不好用，高度是统一了，但都裁剪得厉害）

1
2
3
4
5
6
7
8
9
10
11
<div style="display:flex; gap:10px; height:300px;">

  <img src="left.jpg"
       style="width:60%; height:100%; object-fit:cover;">

  <div style="width:40%; display:flex; flex-direction:column; gap:10px;">
    <img src="top.jpg" style="height:50%; object-fit:cover;">
    <img src="bottom.jpg" style="height:50%; object-fit:cover;">
  </div>

</div>

✅ 效果

👉 左右高度完全一致（非常高级）

2️⃣ 图片居中

1
2
3
<div style="text-align:center;">
  .jpg" width="50%">
</div>

3️⃣ 响应式布局（适配不同宽度，即并排排3张，前面两张按整个宽度的30%，后面剩下的40%够用则放第3张，不够用则第3张挪至下一行）

1
2
3
4
5
<div style="display:flex; flex-wrap: wrap; gap:10px;">
<img src="图1" style="width: 30%;">
<img src="图2" style="width: 30%;">
<img src="图3" 
</div>

你最该记住的3条规则（核心）

✅ 1：统一高度必用

1
object-fit: cover;

✅ 2：不要同时只写 height

❌ 错：

1
height:200px;

✅ 对：

1
width:100%; height:200px;

✅ 3：想整齐就控制“容器高度”

👉 而不是图片本身乱调

👉 排版靠结构：

✔ flex（横向）
✔ column（竖向）

👉 美观靠这一条：

✔ object-fit: cover + 固定高度

✅ 推荐选择（总结）

场景 推荐方式
简单并排 img + width
通用排版 ✅ flex
多图网格 grid
导出PDF稳定 table
花式排版 flex组合

🎯 一句话总结

👉 *在 Typora 中排版图片，优先用 flex，复杂布局用 grid，兼容用 table。