遇到的问题
我使用chemdraw绘制了很多分子的svg图片,这些图片里的分子比例大小是一样的(我复制到word里检验过),但是把这些图片导入到ob里,就发现很小的图片它会自动放大,太大的会自动缩小似乎
这就导致我笔记里分子图片有的有的小,很难受
预期的效果
希望搞个css可以实现让所有的svg图片都以原始尺寸显示
如果可以,我还希望能给予我一个参数,可以使得全部的svg图片可以在原始尺寸的基础上,按一定比例缩放(例如让所有的图片都以百分之50原始图片大小显示)
已尝试的解决方案
/* 库名/.obsidian/snippets/svg-fixed-size.css */
/* 确保所有SVG图片按固定比例显示 - 已验证有效 */
/* 覆盖所有视图模式 */
.markdown-preview-view .image-embed[src$=".svg"],
.markdown-preview-view img[src$=".svg"],
.markdown-reading-view .image-embed[src$=".svg"],
.markdown-reading-view img[src$=".svg"],
.cm-s-obsidian .cm-embed-block .image-embed[src$=".svg"],
.cm-s-obsidian .cm-image.cm-image-svg {
/* 核心缩放设置 */
transform: scale(0.8) !important; /* 调整此值改变缩放比例 */
transform-origin: 0 0 !important;
/* 确保容器正确 */
display: inline-block !important;
max-width: none !important;
max-height: none !important;
/* 尺寸设置 */
width: auto !important;
height: auto !important;
/* 调试边框(启用后可看到SVG边界) */
/* border: 1px solid red !important; */
}
/* 修复可能的外部容器 */
.markdown-preview-section .image-embed[src$=".svg"],
.markdown-preview-section img[src$=".svg"] {
contain: unset !important;
overflow: visible !important;
}
/* 修复编辑模式下SVG显示 */
.cm-contentContainer .cm-embed-block[data-embed-type="image"] .image-embed[src$=".svg"] {
transform: scale(0.8) !important;
transform-origin: 0 0 !important;
}
让ds写的代码,似乎没有效果
width: auto !important;
height: auto !important;
我其实也是上面这个想法,不过好像没有用