借助 AI Support，博客完善了图像显示，这篇 memo 用于记录可复用的图文布局。
并排 2 张图
查看代码
<div class="media-pair">
<img src="图片链接" alt="图 01">
<img src="图片链接" alt="图 02">
</div>
自适应多图网格
查看代码
<div class="media-grid cols-3 masonry-js">
<img src="图片链接" alt="图 01">
<img src="图片链接" alt="图 02">
<img src="图片链接" alt="图 03">
</div>
图左文右
这里是图文混排文案区域。你可以放一段简短说明、心得、步骤、引用等。
这种布局适合「一张重点图 + 一段解释」的场景，阅读节奏会更自然。
查看代码
<div class="media-split">
<img src="图片链接" alt="图片">
<div>
<p>文案内容</p>
</div>
</div>
图右文左
给容器增加 reverse 即可反转左右顺序，移动端会自动改为单列堆叠。
你后续只需要复制这一段结构，替换图片 URL 和文字内容就能复用。
查看代码
<div class="media-split reverse">
<img src="图片链接" alt="图片">
<div>
<p>文案内容</p>
</div>
</div>
图片轮播（含灯箱）
查看代码
<div class="media-carousel">
<img src="图片链接" alt="图 01">
<img src="图片链接" alt="图 02">
<img src="图片链接" alt="图 03">
</div>
画廊灯箱（media-gallery）
主图大图居中展示，下方缩略图条显示所有图片并高亮当前项，点击 < > 或缩略图切换，点击主图进入全屏灯箱。
查看代码
<div class="media-gallery">
<img src="图片链接" alt="图 01">
<img src="图片链接" alt="图 02">
<img src="图片链接" alt="图 03">
</div>
顺带，支持了代码折叠显示功能。