obsidian外观
Obsidian 样式：调整图片不同布局样式
插件ID：obsidian%E6%A0%B7%E5%BC%8F-%E8%B0%83%E6%95%B4%E5%9B%BE%E7%89%87%E4%B8%8D%E5%90%8C%E5%B8%83%E5%B1%80%E6%A0%B7%E5%BC%8F
obsidian%E6%A0%B7%E5%BC%8F-%E8%B0%83%E6%95%B4%E5%9B%BE%E7%89%87%E4%B8%8D%E5%90%8C%E5%B8%83%E5%B1%80%E6%A0%B7%E5%BC%8F
obsidian%E6%A0%B7%E5%BC%8F %E8%B0%83%E6%95%B4%E5%9B%BE%E7%89%87%E4%B8%8D%E5%90%8C%E5%B8%83%E5%B1%80%E6%A0%B7%E5%BC%8F：Obsidian 样式 - 调整图片不同布局样式，将图片渲染为圆形或者控制图片在文本的左侧或者右侧，可组合。
Obsidian 样式：调整图片不同布局样式
1.css 来源
在整理侧边栏索引界面时，@熊猫别熬夜 帮忙写了一个让图片变圆的 css，后面@熊猫别熬夜 拓展了用法，目前能支持的功能包括：
- 将图片渲染为圆形。
- 控制图片在文本的左侧或者右侧。
这两个效果在功能上不会冲突，允许同时使用
2.css 的使用方法
注：以下测试图片来自：英国 1927 剧团的话剧《roots》的剧照
1.将图片变成圆形
插入图片后，在图片名后面添加
#O并设置自己期望的圆形比例|200x200设置完的配置：
![[DSC04693.jpg#O|200x200]]，
具体效果如下 ：
注意点：
- 在编辑模式下，图片有时候显示的是方形的，切换到阅读模式下就可以显示正常了
- 设置圆形大小的参数必须是小写的 x，如上图为：200x200，数字键盘的
*以及大写的X不生效
2.控制图片在文本的左侧或者右侧。
- 插入图片后，在图片名后面添加
#L可控制图片出现在左侧；格式为：![[DSC04693.jpg#L|150]]- 插入图片后，在图片名后面添加
#R可控制图片出现在右侧；格式为：![[DSC04693.jpg#R|150]]
具体效果如下：
3.两种效果混合使用
例：插入图片后，在图片名后面添加
#O设置图片为圆形后，后面添加L可控制图片出现在左侧；后面添加R可控制图片出现在右侧；格式为：![[DSC04693.jpg#OL|200x200]]
具体效果如下：
3.css 片段代码
/* 片段来自：pkmer知识管理交流群，@熊猫别熬夜*/
/* 将所有图片默认居中 */
body:not(.list-image-control-off)
:is(.HyperMD-list-line, ul)
.image-embed.image-embed
img:not([width]):not([class*="emoji"]){
display: flex;
/* justify-content: center; */
/* align-items: center; */
max-width: 90%;
margin: 0 auto;
object-fit: contain;
background-color: transparent !important;
}
/* 视频 */
video {
display: block;
margin: 0 auto; /* 设置左右间距为自适应，上下间距为零 */
width: 90%;
}
/* === Image Float === */
body {
--float-left-margin: 4px 12px 4px 12px;
--float-right-margin: 4px 12px 4px 12px;
--float-snw-display: none;
}
span[src$="O"] img {
object-fit: cover;
border-radius: 50%;
}
span[src$="OL"] img {
object-fit: cover;
border-radius: 50%;
float: left;
text-align: left;
margin: var(--float-left-margin);
margin-block: unset;
display: inline !important;
}
span[src$="OR"] img {
object-fit: cover;
border-radius: 50%;
float: left;
text-align: right;
margin: var(--float-right-margin);
margin-block: unset;
display: inline !important;
}
span[src$="L"] img {
float: left;
text-align: left;
margin: var(--float-left-margin);
margin-block: unset;
display: inline !important;
}
span[src$="R"] img {
float: right;
text-align: right;
margin: var(--float-right-margin);
margin-block: unset;
display: inline !important;
}
/* 独占一行 */
span[src$="IL"] img {
float: unset;
text-align: left;
margin: var(--float-left-margin);
margin-block: unset;
display: inline !important;
}
span[src$="IR"] img {
float: unset;
text-align: right;
margin: var(--float-right-margin);
margin-block: unset;
display: inline !important;
}
