Obsidian图片分列显示

[uncoverman]

Obsidian 常规的图片都是一张图片显示一行，可以通过自定义 CSS 代码片段的方式实现美化。效果如下：

实现方式如下：

1、增加代码片段

/* 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

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

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

[xjtcnj]

希望纲入核心插件。

[Khan]

我在默认主题中无法使用。

[hancisse]

在Blue Topaz主题中使用后，图片无法自动居中了，尝试使用其他CSS片段对图片进行居中，但是好像和img-grid冲突，请问有什么好的解决办法吗？

[hancisse]

还有就是并列的图片都是紧贴在一起的，没有间隔

[ricepeak]

1.尝试过表格。缺点：阅读模式下点击图片闪屏
2.modular css layout。兼有插件 columns 的功能，个人选择了其中的 Gallery Cards（可同时实现行内插入图片）。
参考：Obsidian 如何制作多栏布局