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 :
{#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.
bencc
November 13, 2022, 12:32pm
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.
+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