夜航船夫

Obsidian 图片分列显示

点击返回顶部

首页

归档

好物

工具

摄影

关于

首页

归档

好物

工具

摄影

关于

Obsidian

Obsidian 图片分列显示

2022-01-22

Obsidian 常规的图片都是一张图片显示一行,可以通过自定义 CSS 代码片段,实现预览模式下的图片并行显示美化。效果如下:

一行四图

首行三图 首行两图

实现方式如下:

1、下载代码片段,放到 CSS 代码片段的文件夹:.obsidian/snappets

/* For Obsidian 0.9.22 and up */

.img-grid .markdown-preview-section img:not([width]),
.img-grid .markdown-preview-section video {
   width:100%;
}
.img-grid .markdown-preview-section > div {
   display:flex;
}
.img-grid .markdown-preview-section > div > .internal-embed {
   flex:1;
   margin-left:-0.5rem;
   padding:0 0.5rem 0.5rem 0.5rem;
}
.img-grid .markdown-preview-section > div > *:not(div) {
   margin-block-start: 0rem;
   margin-block-end: 1rem;
}
.img-grid .markdown-preview-section > div hr {
   width:100%;
}
/* These lines make every image the same height */
.img-grid .markdown-preview-section > div > .internal-embed img:not(:active) {
   object-fit:cover;
   height:100%;
}

2、在文档头部 front-matter 区写上 cssclass: img-grid

img-grid

3、用换行控制图片是否在同一行,图片间没有换行的话,图片默认在同一行。

以上的方案来自官方论坛,参考链接附上: Display side by side image grid

其他 Obsidian文章

  • 为什么喜欢用 Obsidian 做笔记
  • Obsidian 美化方案
  • Obsidian 输入时放礼花
  • Obsidian 集成了 Drawio
  • Obsidian 的 Excalidraw 插件自定义中文字体
  • Obsidian 随机生成读书笔记
  • Obsidian 在地图上做笔记
上一页: Obsidian 的 Excalidraw 插件自定义中文字体下一页: 整理一下 iPad 桌面

Copyright ©夜航船夫 2015-2026

浙ICP备15005499号