Obsidian 图片控制快速上手3 招搞定排版【免费下载链接】obsidian-modular-css-layoutCSS Layout hack for Obsidian.md项目地址: https://gitcode.com/gh_mirrors/ob/obsidian-modular-css-layout那张流程图又顶出页面右边了三张截图想并排间距还对不齐。Obsidian 图片控制这事不用改主题装一套 MCLModular CSS LayoutCSS 片段就行文字绕图走、散图排成网格、流程图自适应缩放全是几行标记的事。先把环境搭好MCL 是一组 CSS 片段下载后在 Obsidian 里打开开关就行一共 3 步把仓库克隆到本地这条命令只跑一次git clone https://gitcode.com/gh_mirrors/ob/obsidian-modular-css-layout跑完你会发现仓库根目录里有 MCL Gallery Cards.css 等 3 个片段文件。在 设置 → 外观 里点 CSS 片段右侧的文件夹图标打开 .obsidian/snippets把仓库里用到的 .css 拷进去。只做图片相关拷 MCL Gallery Cards.css 就够。回到 CSS 片段列表把开关打开。想调圆角、最大高度这些参数去 Style Settings 插件里找 Modular CSS Layout。✅ 开关全亮可以开工了。更多细节看 安装说明。环境齐了先看最常见的诉求侧图。图片排版让文字绕着图走长笔记里插一张侧图最舒服的排版就是文字从图旁边绕过去。给图片说明文字加个方位词下面这行嵌入一张图说明里写 float-right意思是贴右侧浮动、宽 350 像素![[side-photo.jpg|float-right|350]]渲染后你会看到图片钉在右侧正文从它左边一行行绕过去大小刚好不抢戏。编辑视图里也想看到浮动只写 left 或 right浮动只在阅读视图生效。想在实时预览也生效加上 float- 前缀写成 float-right。为什么文字会绕着图走CSS 把图片说明文字当选择器读到 right 就加上 float: right文字自然被挤到另一侧手机上排版也会自动调整。图 1float-right 生效后的图文混排文字绕着右侧图片流动侧图搞定了接下来让散图排整齐。图片控制把多张图排成整齐画廊散图一张接一张往下掉看着乱。画廊模式让它们一行行对齐。文件头声明 image-gallery在 frontmatter 里声明一次同排图片写在同一行空一行就换行--- cssClass: image-gallery --- ![[pic1.jpg]] ![[pic2.jpg]] ![[pic3.jpg]] ![[pic4.jpg]] ![[pic5.jpg]]保存后你会看到每行图片横向排开高度拉齐变成整齐的画廊每行放两张或三张都行。不想动文件头用 callout 装图把图片塞进带 gallery 标记的 callout作用范围只限这个块 [!note|gallery] ![[pic1.jpg]] ![[pic2.jpg]]效果和 frontmatter 一样成行适合在长笔记里只给局部上图廊。为什么散图能排成网格CSS 找到装着图片的段落用 flex 横向排开再用 object-fit 统一裁切高度所以图不会被拉变形。图 2image-gallery 把多张图片排成高度统一的网格图排整齐了再看最容易翻车的大流程图。图片缩放让流程图自动缩到页面宽节点一多的 Mermaid 图默认尺寸经常横着溢出页面右边还看不见。装好片段自适应默认就开着启用 MCL Gallery Cards 后不用加任何标记Mermaid 图默认就按页面宽缩放不想要可去 Style Settings 关掉。画个简单的试试渲染出来你会发现图被压进页面宽度内节点再多也不横向滚动。想看清细节点一下就放大在 Style Settings 的 Mermaid 区块打开 Enable Mermaid Zoom via CSS点图就是全屏查看再点收回。注意 0.16.x 版本编辑视图的缩放有毛病去阅读视图用。为什么流程图会自动缩到页面宽给 mermaid 的 svg 设了 max-width: 100%图就跟着容器宽度走。图 3启用 fit-to-width 后流程图自动适配页面宽图片控制里容易踩的坑⚠️ 三个高频问题都按现象、原因、解法说。画廊不生效图片竖着排现象加了 image-gallery图还是一行一个。原因用了这种 Markdown 嵌入画廊只认 wikilink。解法改成 ![[路径/图片.jpg]]。实时预览里同排图片被挤成竖列现象frontmatter 模式下编辑时图片一行一个。原因实时预览只把同一行写着的图片算作一排。解法同排图片写在同一行空行才是换行。浮动图编辑时跳回段落里现象阅读视图图在右边一编辑就钻回文字中间。原因只写了 right没加 float- 前缀。解法写成 float-right编辑阅读都生效。图摆正了剩下的就是多试几张自己库里的图。更多玩法比如列表卡片、宽页面去 Gallery Cards 文档 和 多栏布局文档 翻一翻。【免费下载链接】obsidian-modular-css-layoutCSS Layout hack for Obsidian.md项目地址: https://gitcode.com/gh_mirrors/ob/obsidian-modular-css-layout创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Obsidian 图片控制快速上手：3 招搞定排版
Obsidian 图片控制快速上手3 招搞定排版【免费下载链接】obsidian-modular-css-layoutCSS Layout hack for Obsidian.md项目地址: https://gitcode.com/gh_mirrors/ob/obsidian-modular-css-layout那张流程图又顶出页面右边了三张截图想并排间距还对不齐。Obsidian 图片控制这事不用改主题装一套 MCLModular CSS LayoutCSS 片段就行文字绕图走、散图排成网格、流程图自适应缩放全是几行标记的事。先把环境搭好MCL 是一组 CSS 片段下载后在 Obsidian 里打开开关就行一共 3 步把仓库克隆到本地这条命令只跑一次git clone https://gitcode.com/gh_mirrors/ob/obsidian-modular-css-layout跑完你会发现仓库根目录里有 MCL Gallery Cards.css 等 3 个片段文件。在 设置 → 外观 里点 CSS 片段右侧的文件夹图标打开 .obsidian/snippets把仓库里用到的 .css 拷进去。只做图片相关拷 MCL Gallery Cards.css 就够。回到 CSS 片段列表把开关打开。想调圆角、最大高度这些参数去 Style Settings 插件里找 Modular CSS Layout。✅ 开关全亮可以开工了。更多细节看 安装说明。环境齐了先看最常见的诉求侧图。图片排版让文字绕着图走长笔记里插一张侧图最舒服的排版就是文字从图旁边绕过去。给图片说明文字加个方位词下面这行嵌入一张图说明里写 float-right意思是贴右侧浮动、宽 350 像素![[side-photo.jpg|float-right|350]]渲染后你会看到图片钉在右侧正文从它左边一行行绕过去大小刚好不抢戏。编辑视图里也想看到浮动只写 left 或 right浮动只在阅读视图生效。想在实时预览也生效加上 float- 前缀写成 float-right。为什么文字会绕着图走CSS 把图片说明文字当选择器读到 right 就加上 float: right文字自然被挤到另一侧手机上排版也会自动调整。图 1float-right 生效后的图文混排文字绕着右侧图片流动侧图搞定了接下来让散图排整齐。图片控制把多张图排成整齐画廊散图一张接一张往下掉看着乱。画廊模式让它们一行行对齐。文件头声明 image-gallery在 frontmatter 里声明一次同排图片写在同一行空一行就换行--- cssClass: image-gallery --- ![[pic1.jpg]] ![[pic2.jpg]] ![[pic3.jpg]] ![[pic4.jpg]] ![[pic5.jpg]]保存后你会看到每行图片横向排开高度拉齐变成整齐的画廊每行放两张或三张都行。不想动文件头用 callout 装图把图片塞进带 gallery 标记的 callout作用范围只限这个块 [!note|gallery] ![[pic1.jpg]] ![[pic2.jpg]]效果和 frontmatter 一样成行适合在长笔记里只给局部上图廊。为什么散图能排成网格CSS 找到装着图片的段落用 flex 横向排开再用 object-fit 统一裁切高度所以图不会被拉变形。图 2image-gallery 把多张图片排成高度统一的网格图排整齐了再看最容易翻车的大流程图。图片缩放让流程图自动缩到页面宽节点一多的 Mermaid 图默认尺寸经常横着溢出页面右边还看不见。装好片段自适应默认就开着启用 MCL Gallery Cards 后不用加任何标记Mermaid 图默认就按页面宽缩放不想要可去 Style Settings 关掉。画个简单的试试渲染出来你会发现图被压进页面宽度内节点再多也不横向滚动。想看清细节点一下就放大在 Style Settings 的 Mermaid 区块打开 Enable Mermaid Zoom via CSS点图就是全屏查看再点收回。注意 0.16.x 版本编辑视图的缩放有毛病去阅读视图用。为什么流程图会自动缩到页面宽给 mermaid 的 svg 设了 max-width: 100%图就跟着容器宽度走。图 3启用 fit-to-width 后流程图自动适配页面宽图片控制里容易踩的坑⚠️ 三个高频问题都按现象、原因、解法说。画廊不生效图片竖着排现象加了 image-gallery图还是一行一个。原因用了这种 Markdown 嵌入画廊只认 wikilink。解法改成 ![[路径/图片.jpg]]。实时预览里同排图片被挤成竖列现象frontmatter 模式下编辑时图片一行一个。原因实时预览只把同一行写着的图片算作一排。解法同排图片写在同一行空行才是换行。浮动图编辑时跳回段落里现象阅读视图图在右边一编辑就钻回文字中间。原因只写了 right没加 float- 前缀。解法写成 float-right编辑阅读都生效。图摆正了剩下的就是多试几张自己库里的图。更多玩法比如列表卡片、宽页面去 Gallery Cards 文档 和 多栏布局文档 翻一翻。【免费下载链接】obsidian-modular-css-layoutCSS Layout hack for Obsidian.md项目地址: https://gitcode.com/gh_mirrors/ob/obsidian-modular-css-layout创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考