Relative scaling of images

Feature requests
1

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.

3 Likes
2

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.

1 Like
3

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

4

SIRvb’s image adjustment css has lots of options:

5

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

6

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:

Screenshot 2023-09-07 at 15.35.37
Screenshot 2023-09-07 at 15.35.371114×1582 196 KB

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.

1 Like