图片并排css

图片的自动并排。

官方的主题其实是可以实现的,但是在图片比较大的时候,还是会变成一张图片一行的形式,这时候还需要手动调图片尺寸。

我用blue topaz主题,是需要加yaml或在图片引用上加一些内容才可以实现并排,感觉比较麻烦,全局并排的开关好像失效了。

开始在网上找了一些css代码,但不支持实时预览,我希望是实时预览,和阅读模式都并排,所以自己又折腾了半天,结合网上代码拼凑和摸索出这几句css,加上去就会自动并排。

/*源码预览*/
.markdown-source-view.is-live-preview .cm-line:has(.internal-embed.image-embed) {
    display: table;
}
.markdown-source-view.is-live-preview .internal-embed.image-embed.is-loaded {
  display: table-cell;
}

/*阅读模式*/
span.image-embed[alt*="."] {
  display: table-cell;
}
img[alt*="."] {
  max-height: 100vh;
  object-fit: cover;
}

这些代码加到哪里才能起作用呢?

不知道咋添加css脚本的看这帖子2楼CSS 分享:自动隐藏式十字花左侧边栏 - #2,来自 PlayerMiller