插入图片，能根据实际宽度自动判断，大于N值设置显示宽度为N吗？

疑问解答
1

默认是图片宽度小于当前编辑器或预览窗口时，以图片实际宽度显示。
但如果是大于时，就是以窗口的宽度为图片显示宽度。对于大图片过多的占据了编辑器空间。

有没有插件，或css大法也行，在插入或显示时：
1、如果图片宽度小N值，就以实际宽度显示；
2、如果图片宽度大于N值，插入自动![[xxx.png|N]] 或 强制最大以N值的宽度显示。（Image toolkit真好用）

Custom Attachment Location 插件不用推荐了，我同时安装了File Cleaner Redux后，感觉File Cleaner Redux 删除就出问题，明显在使用文件，也提示没有引用了，可以删除了。

1 个赞
2

找不到原CSS来源了，我一直在用的：
笔记添加属性值，可以只高或宽
如图添加后，笔记中的图片宽度就不会超过250px、高度不会超过300px
同时添加img-W250和img-W350，会只生效350
CSS中没有进行设定的，就相当于没有添加，得自己到CSS再去添加
image

/*
img-H350
img-grid → Enter图片才换行
img-W350
*/

/*H
100、200、250、300、320
110、120~~~190
*/
.img-H100 img { max-height: 100px; width: auto; }
.img-H110 img { max-height: 110px; width: auto; }
.img-H120 img { max-height: 120px; width: auto; }
.img-H130 img { max-height: 130px; width: auto; }
.img-H140 img { max-height: 140px; width: auto; }
.img-H150 img { max-height: 150px; width: auto; }
.img-H160 img { max-height: 160px; width: auto; }
.img-H170 img { max-height: 170px; width: auto; }
.img-H180 img { max-height: 180px; width: auto; }
.img-H190 img { max-height: 190px; width: auto; }
.img-H200 img { max-height: 200px; width: auto; }
.img-H210 img { max-height: 210px; width: auto; }
.img-H220 img { max-height: 220px; width: auto; }
.img-H230 img { max-height: 230px; width: auto; }
.img-H240 img { max-height: 240px; width: auto; }
.img-H250 img { max-height: 250px; width: auto; }
.img-H260 img { max-height: 260px; width: auto; }
.img-H270 img { max-height: 270px; width: auto; }
.img-H280 img { max-height: 280px; width: auto; }
.img-H290 img { max-height: 290px; width: auto; }
.img-H300 img { max-height: 300px; width: auto; }
.img-H310 img { max-height: 310px; width: auto; }
.img-H320 img { max-height: 320px; width: auto; }
.img-H330 img { max-height: 330px; width: auto; }
.img-H340 img { max-height: 340px; width: auto; }
.img-H350 img { max-height: 350px; width: auto; }

/* 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%;
}

/* 图片宽度样式 */
.img-W100 img { max-width: 100px !important; height: auto; }
.img-W200 img { max-width: 200px !important; height: auto; }
.img-W250 img { max-width: 250px !important; height: auto; }
.img-W300 img { max-width: 300px !important; height: auto; }
.img-W320 img { max-width: 320px !important; height: auto; }
.img-W350 img { max-width: 350px !important; height: auto; }
.img-W390 img { max-width: 390px !important; height: auto; }
.img-W400 img { max-width: 400px !important; height: auto; }
1 个赞
3

这是写了个TailwindCSS？ :joy: