一、横排模板（电脑端并排，手机端自动适配）

 模板1：2图横排（左右等分，留边距）
<div style="display: flex; justify-content: center; gap: 15px; margin: 20px auto; max-width: 900px; flex-wrap: wrap; padding: 0 10px;">
    <img src="图片1链接" alt="描述文字" style="width: calc(50% - 10px); max-width: 430px; height: auto; border-radius: 4px; object-fit: cover; cursor: pointer;">
    <img src="图片2链接" alt="描述文字" style="width: calc(50% - 10px); max-width: 430px; height: auto; border-radius: 4px; object-fit: cover; cursor: pointer;">
</div>

模板2：3图横排（三列等分，适配桂花图效果）
<div style="display: flex; justify-content: center; gap: 15px; margin: 20px auto; max-width: 900px; flex-wrap: wrap; padding: 0 10px;">
    <img src="图片1链接" alt="描述文字" style="width: calc(33.333% - 10px); max-width: 280px; height: auto; border-radius: 4px; object-fit: cover; cursor: pointer;">
    <img src="图片2链接" alt="描述文字" style="width: calc(33.333% - 10px); max-width: 280px; height: auto; border-radius: 4px; object-fit: cover; cursor: pointer;">
    <img src="图片3链接" alt="描述文字" style="width: calc(33.333% - 10px); max-width: 280px; height: auto; border-radius: 4px; object-fit: cover; cursor: pointer;">
</div>


二、竖排模板（单图/多图居中，适配窄屏）

模板1：单图竖排（居中窄版，不贴边）
<div style="margin: 20px auto; max-width: 500px; width: 100%; box-sizing: border-box; text-align: center; padding: 0 10px;">
    <img src="图片链接" alt="描述文字" style="width: 100%; max-width: 480px; height: auto; border-radius: 4px; object-fit: cover; cursor: pointer;">
</div>

模板2：多图竖排（上下堆叠，带间距） 
<div style="margin: 20px auto; max-width: 500px; width: 100%; box-sizing: border-box; text-align: center; padding: 0 10px;">
    <img src="图片1链接" alt="描述文字" style="width: 100%; max-width: 480px; height: auto; border-radius: 4px; object-fit: cover; margin-bottom: 10px; cursor: pointer;">
    <img src="图片2链接" alt="描述文字" style="width: 100%; max-width: 480px; height: auto; border-radius: 4px; object-fit: cover; margin-bottom: 10px; cursor: pointer;">
    <img src="图片3链接" alt="描述文字" style="width: 100%; max-width: 480px; height: auto; border-radius: 4px; object-fit: cover; cursor: pointer;">
</div>

使用说明
1.  把代码中的「图片X链接」替换成WordPress媒体库中图片的「文件URL」。
2.  所有模板自带响应式适配，手机端会自动调整布局，不影响灯箱放大功能。
3.  保留了4px圆角，和你现有文章的风格统一。