图片怎么并排显示

疑问解答
1

安卓端，Blue Topaz主题，编辑模式。

多个图片插入在一行有序无序里会被二次缩小比例，这个怎么改正常啊:frowning_with_open_mouth:，或者有没有其他好用的片段

正常段落一行一个图片比例正常缩小且并排

Screenshot_20250916011431
Screenshot_202509160114311080×1107 104 KB

/* 编辑模式下图片并排显示（多张图片链接写在在同一行、或多行且每行一张图片上下都挨着不空行 */

/* Bug：在有序无序列表中插入多个图片链接、图片会变得很小，应该是Obsidian原本在有序无序列表插入大图自适应变小和代码叠加变的更小了 */

/* 选中编辑模式下含有图片嵌入的行（cm-line），使用 flex 布局 */
.markdown-source-view.is-live-preview .cm-line:has(.internal-embed.image-embed) {
    display: flex;        /* 将该行内容变为弹性布局容器，方便多张图片并排显示 */
    flex-wrap: wrap;      /* 当图片总宽度超过容器时自动换行，保证不会溢出 */
    gap: 10px;            /* 图片之间的间距为10px，可以根据需要调整 */
}

/* 容器宽度控制每张图片显示比例 */
/* 选中每个已加载的图片嵌入容器（不是 img 本身，而是 Obsidian 的内部容器 span/div） */
.markdown-source-view.is-live-preview .internal-embed.image-embed.is-loaded {
    display: inline-block; /* 容器本身表现为块级/行内块，保证 flex 布局下并排排列 */
    width: 30%;            /* 限制每个容器宽度为父容器的30%，默认每行显示约3张图片 */
    object-fit: contain;    /* 保证容器内图片按比例缩放，不裁切或拉伸 */
}

/* 图片本身按容器宽度缩放 */
/* 选中容器内的 img 元素 */
.markdown-source-view.is-live-preview .internal-embed.image-embed img {
    width: 100%;      /* 图片填充整个容器宽度，使其与容器宽度一致，这里改变只能让图片变小不能让图片并排显示 */
    height: auto;     /* 高度自动计算，保持图片纵横比不变 */
}
2

已解决

/* ✅ 安卓端编辑模式下统一控制图片显示（段落 + 列表都生效） */

/* 所有图片一律并排显示，缩放由下面的 :only-child 决定 */
.markdown-source-view img {
  display: inline-block !important;
  vertical-align: top !important;
  margin: 2px !important;
}

/* 全局唯一真正生效的规则：控制图片大小 */
.markdown-source-view img:only-child {
  max-width: 30% !important;   /* 修改这个数值即可控制段落/列表里的图片比例 */
}