Relative scaling of images (by percentage)

[mmplx]

Use case or problem

Embedded images can be scaled using the ![[image.png|100x100]] syntax.

It would be useful to also be able to use a percentage or [0,1] number in order to specify a relative size.

It’s easier for me to immediately realize that I need to resize an image to about half its width, while I usually have to try&err in order to find a good px size.

Proposed solution

• ![[image.png|50%]]
• ![[image.png|0.5]]
• ![[image.png|100%x50%]]

The question arises of relative to what? Window width? Or original image size? I would say the second one, since it’s more predictable.

[jaxxor]

Use case or problem

When you import photos of any type, you can set the size in pixles.
That is a static measurement and does not take into account the width of the frame.

Proposed solution

Instead of a fixed size in px units,

![[Pasted image 20230217023409.png|250]]

add functionality to support a % of the images original size.

![[Pasted image 20230217023409.png|50%]]

Can be done with CSS currently.
I don’t think modifying the aspect ratio will apply to many users, so probably ok to skim over the need for a (width x height) field.
Set the width to a % and the height to auto.

Current workaround (optional)

Set the image size in px to a “workable” size, and just suck it up.

[Fastidious]

This would be a good enhancement. Does anyone know of a plugin that does this right now? Or a CSS snippet that would do that same?

[ariehen]

SIRvb’s image adjustment css has lots of options:

Image Adjustments - SlRvb's Documentation - Obsidian Publish

[Fastidious]

None of "SIRvb’s image adjustment css” options does what the proposed solution states.

[cousin]

@mmplx

![[image.png|50%]]

I actually would understand this as generating an image 50% of the text width, like in CSS. This would actually be great to create some cool layouts for pictures.

![[photo1.jpg|50%]]![[photo2.jpg|50%]]
![[photo3.jpg|33%]]![[photo4.jpg|33%]]![[photo5.jpg|33%]]

This code would then generate the following layout:

This screenshot was actually achieved using:

![[photo1.jpg|350]]![[photo2.jpg|350]]
![[photo3.jpg|233]]![[photo4.jpg|233]]![[photo5.jpg|233]]

This is not very elegant because it assumes the user knows the text width. Furthermore, this text width is not constant across devices. So the layout is broken on smartphones.

[MugenMuso]

I would like to see this feature implemented as well.

[missinglinks]

For what it’s worth, I just found this plugin which gives a path forward for this feature: GitHub - johansan/pixel-perfect-image: Pixel perfect 100% image resizing, copy to clipboard, show image in Finder/Explorer, edit image in external editor, and much more..

[onlyice]

Use case or problem

I’m using a Macbook Pro, which has a 2x scaling for its built-in Retina display monitor. When I capture a screenshot and paste it into Obsidian, the image dimensions displayed in Obsidian would be significantly larger. For example:

It affects readability because I don’t want such a small image to take up so much space.

Proposed solution

Add the ability to use percentages to specify the image dimensions, like this:

[[my-screenshot.jpg|50%]]
![50%x50%](https://example.com/some-external-image.png)

Current workaround (optional)

Currently, I can only specify the image dimensions using exact pixels, which is cumbersome:

[[my-screenshot.jpg|300]]

Related feature requests (optional)

Not found.

[vanadium]

It would indeed be nice if one could have a relative reduction in figure size, such that an image scales properly within the column irrespective of the display width and resolution.

A better workaround is to add some whitespace yourself to the sides of the image, using a graphics editor. Then the image will display consistently on displays with different resolution.