关于本地图片高度的问题

疑问解答
1

目前我知道插入的本地图片宽度是可以限制的，如![[图片.jpg|200]]，但是高度可不可以啊，我想限制高度，用CSS，我知道代码，但是用CSS设置的话整体都会变成统一的，我想每个笔记都有单独的设置

2

可以用cssclass功能，每个笔记yaml里面写不同的cssclass然后再改css，就可以对不同笔记设置了。

3

。。。我也是菜鸡，这个是我之前找到的图片大小片段，下面应该是鼠标悬停放大的，不知道具体要怎么改

.markdown-preview-view img, 
.markdown-preview-view video {
    width: auto;
    height: 250px;
    object-fit: contain;
    max-height: 300px;
    max-width: 550px;
    outline: 0px solid var(--text-accent);
  }
.markdown-preview-view img:hover , 
.markdown-preview-view video:hover {
    width: auto;
    height: auto;
    max-width: min(100%, 80vw);
    max-height: min(100%, 80vh);
    outline: none;
    cursor: zoom-in;
}
4

比如你笔记最开头声明

---
cssclass: img-height-limit
---

然后在 css snippet 里写

.img-height-limit img {
  width: auto;
  height: 200px;
}

这样就是对特定某篇笔记, 调整其中所有图片的高度

另一个办法, 可以不改变笔记所有图, 而是仅针对单个图片

.markdown-source-view img[alt="h100"] {
  width: auto;
  height: 100px;
}
.markdown-source-view img[alt="h300"] {
  width: auto;
  height: 300px;
}
.markdown-source-view img[alt="h500"] {
  width: auto;
  height: 500px;
}

.markdown-preview-view img[alt="h100"] {
  width: auto;
  height: 100px;
}
.markdown-preview-view img[alt="h300"] {
  width: auto;
  height: 300px;
}
.markdown-preview-view img[alt="h500"] {
  width: auto;
  height: 500px;
}

然后图片里加上 h100 / h300 这样子的备注 ![[torch.png|h100]]

3 个赞
5

楼上说的对。 :grinning:

6

受教了，非常感谢

7

![[image.png|100x100]] 这个不是可以自定义宽高吗？

1 个赞
8

是可以，但是这个你要按照图片比例来弄很麻烦啊，一般都是|100设置宽度，然后高度自动，但是这样不整齐，我个人觉得高度统一宽度自动比较整齐，而且鼠标悬浮预览的话预览框内的图片也是高度一致比较容易看全整个内容，所以就想统一高度

9

感谢分享！困扰许久的问题终于解决了！！！ :sob: