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

Feature requests
1

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
2

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.
3

I second this. PLEASE add resizing by percent.

5 Likes
4

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

5

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.

6

+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