Image resizing, like in Notion or Evernote

Hi all.

Please help me answer the question.
Is it possible to resize an image like in Notion or Evernote? I’ve tried resizing images manually as described in Obsidian help, but that’s inconvenient for me:
![[image.png|100x100]]

Please give me advice on how to quickly and easily resize images in Obsidian.

Thank you.

1 Like

I don’t think there’s a point n click way just yet. But i think we can make feature request for some of the image plugin to have that feature.

Anyway, if it helps, u can preset using css (globally) so that the size is like a max width of 300px or so.

1 Like

May I ask how to preset using CSS? No coding knowledge here :slight_smile:

this is the css snippet. with this snippet, if u specify width in your markdown e.g. [[yourpicfile.png|500]], the 500px width specified will be used instead of the css.

btw, you only need to specify one number in the “wikilink” style embed as my example just now. it will detect as the width – the height will correspond to the image’s ratio

/* === Images size defaults === */
.image-embed.image-embed img:not([width]) {
    max-height: 250px;
    max-width: 300px;
}

in case you need help on loading the snippets…

  1. copy the code above into any text file
  2. save as any file name but with .css e.g. image-sizer.css in [yourvault]/.obsidian/snippets folder
    • note that .obsidian is a hidden folder
  3. reload obsidian and enable it via Settings > Appearance

if you use image in lists, i have more mainstream snippets that you can use

5 Likes

It won’t work with markdown links ?

haven’t tried it before, hence the selective inclusion statement. btw, i just tested with markdown links, it works as well – just specify single number that will be interpreted as width.

on that note, this method only works with obsidian. it’s not by any means standard. it doesn’t work in logseq, stackedit.io or even github.

Yes, it’s works.
image

Also I created a CSS snippet and included it.
image
But after inserting the image, its size does not change :frowning:
Did I do something wrong?

The snippet in ur file has more dots and spaces than my share. It must be exact.

After fixing it worked, thanks.
All the same, there is not enough resizing of the image with the mouse :frowning:

Yeah. That would require a solution with plugin. My knowledge so far limited to css.

Here is a solution: GitHub - nicojeske/mousewheel-image-zoom

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.