借助 AI Support，博客完善了图像显示，这篇 memo 用于记录可复用的图文布局。
并排 2 张图
查看代码
<div class="media-pair">
<img src="图片链接" alt="图 01">
<img src="图片链接" alt="图 02">
</div>
并排 2 张图（超过 2 张自动切换）
查看代码
<div class="media-pair">
<img src="图片链接" alt="图 01">
<img src="图片链接" alt="图 02">
<img src="图片链接" alt="图 03">
<img src="图片链接" alt="图 04">
</div>
左对齐竖图排列（可设置高度）
下面这个布局适合竖图左对齐排列展示，可以通过 media-portrait-h-220 / 240 / 280 / 360 / 480 这几个类限制显示高度，图片会在固定高度内按比例缩小完整显示，不会被截取，也不会启用左右翻页。
查看代码
<div class="media-portrait-row media-portrait-h-240">
<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>
单图宽度控制
下面这个单图布局适合只有一张重点图的场景，可以通过 media-w-100 / 95 / 90 ... 这类类名控制宽度，按 5% 为步进自己调。
查看代码
<div class="media-single media-w-65">
<img src="图片链接" alt="图片">
</div>
图左文右
查看代码
<div class="media-split">
<img src="图片链接" alt="图片">
<div>
<p>文案内容</p>
</div>
</div>
图右文左
查看代码
<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>
顺带，支持了代码折叠显示功能。