Image resize: Allow relative units, not just pixels (or Pandoc notation)

Use case or problem

We got an extended syntax for (embedded) image resizing—a good first step, but it only allows pixels as units.

Pixels are not a good unit for different screen sizes or even PDF printing, it would be preferable to be able to use relative units like %, em and rem.

Proposed solution

Add the possibility to specify %, em and rem as relative units, instead of just pixels. Maybe like so:

![[image.png|50%x50%]]
![[image.png|50%]]
![[image.png|70em]]
![[image.png|70rem]]

Since many of us are surely using Pandoc for post-processing Obsidian Notes into papers or books, it would even be better to (also?) support the Pandoc link_attributes notation:

![Image](image.png){#id .class width=50% height=50%}

Current workaround (optional)

<img src="app://local/home/user/Documents/vault/image.png" style="width: 50%;" />

This format actually sucks, since it breaks the idea of using relative links.

My alternative idea of simply using

<img src="image.png" style="width: 50%;" />

produces an error

GET app://obsidian.md/image.png net::ERR_FILE_NOT_FOUND

Related feature requests (optional)

https://forum.obsidian.md/search?q=image%20resize

9 Likes

I suppose this is the latest feature request for this, so I’ll chime in here instead of creating a new topic.

Use case or problem

The current image markup doesn’t allow specifying full-width images ![[image.png|100]]

Proposed solution

Implement something like ![[image.png|full-width]]? I don’t know what’s under the hood, probably not markdown-it-imsize but something like it.

Current workaround (optional)

A workaround I used is to add some custom CSS to the current theme:

/* Images:; Full width images for the whole note or declared through alt attribute selector overloading */
/* Usage (all images in the note): add to frontmatter `cssclass: full-width-images` */
/* Usage (specific image): embed with `![[image.jpg|Image description containing .full-width-image]]` */
.full-width-images.markdown-preview-view .image-embed img:not([width]),
.image-embed img[alt~=".full-width-image"],
.image-embed img[alt~=".full-width"] {
  width: 100%;
}

This workaround smells, because it’s a custom style that in fact does functionality (instead of presentation).

Another workaround is to drop to HTML and set relative units in the style attribute:

<img style="width: 25%" src="app://local//[notebook dir]/obsidian/test1/48ubgp.jpg" alt="48ubgp.jpg">

Or support inline <style> tags, but I assume since this isn’t supported by now there’s a good reason for it.

<style>img { width: 100% }</style>

![[example-image.jpg]]

etc. etc. etc.

I second this. PLEASE add resizing by percent.

5 Likes

Resizing by percent should probably take precedence over other additional units.

Commenting to +1 this. Especially useful for viewing my notes on mobile. Currently, my larger images that look fine on desktop are cut off the screen on mobile.

+1

My hacky workaround for now is using the following CSS snippet:

img[alt*="w90"] {
    width: 90%;
}

img[alt*="w80"] {
    width: 80%;
}

img[alt*="w70"] {
    width: 70%;
}

img[alt*="w60"] {
    width: 60%;
}

img[alt*="w50"] {
    width: 50%;
}

which then allows me to have an image like ![[myrelativeaddress|w50]] and that shows the image at 50% width etc