#5

Very useful! It should be default piece of CSS code in Obsidian!

3 Likes
#6

Excllent work, thank you for sharing this!

1 Like
#7

Just one simple question:

where should I put these code, in the obsidian.css?

1 Like
#8

Yep! In obsidian.css

#9

where do I put this code? Sorry, I don’t know programming.

#10

I added this as CSS snippet, and it works great. One question though: when I click and hold the button down it will zoom in. When I let go the button, it will zoom out. Is there a way to zoom in on a click (button down then up) and zoom out requiring another ciick on the picture? That would allow to move the mouse around more easily when zoomed-in (especially with a trackpad).

1 Like
#11

Not with pure CSS, that I know of. This would require a plugin or a change to Obsidian itself.

#12

Thank you for this snippet.
But is there a way to expand the image to full screen rather than be limited to the size of the pane?
My use case is that if i open many pane or use sliding pane (andy mode), the pane will be smaller, so it imposed a constraints on the zoom function.

#13

This is gold! Thanks a lot!

#14

This is super helpful, thank you so much! But I was wondering, is it possible to make it so you wouldn’t have to hold down the mouse button in order to keep the image large? Clicking once to keep the image expanded would be more convenient for me. Don’t know much about coding to do it myself.:frowning:

#15

Hey @kepano ,
Good work with the click to zoom.

This cool new new tweak for inverting images Auto-adaptive images [for dark / light theme] breaks this click to zoom tweak. Any possible solution ?

#16

Loving the minimal theme, thank you.

I solved my problem while making this post, so I’ll share:

How to make thumbnails (that do not expand when resizing windows, and do not affect the zoom size.)

Use the snippet provided by OP, and add separately:

.markdown-preview-view .image-embed  {
max-width: 250px;
}

If you just use this snippet by itself, it will effect zoom size.

1 Like
#17

Thanks for the your code. This is really handy and helpful.

#18

Thank you! Absolutly great feature!

#19

For those who do not where to add the code, as explained here, in the VAULT folder if you create one called snippets, and create a file with any name and .css extension it will be detected in Settings → Appearance → CSS snippets. An example:

image
image1570×854 142 KB

Thanks for the simple yet great funcionality!

1 Like
#20

works perfectly
I was getting frustrated due to the impossibility of zooming on images

Your css saved my sanity, thanks!!

#21

It’s not working in version 0.13.14

#22

Updated the snippet in the OP for Live Preview. You can also use Minimal Theme which includes the snippet bundled in, and is kept up to date for new versions of Obsidian.

1 Like
#23

It’s working. Thanks for your update @kepano. Is there a way that I could put the image outside the pane and create it as a lightbox image?

#24

Is there a way to modify CSS so it doesn’t require the mouse be held down? (Click to zoom in, next click closes the image). Similar to the way it works with mobile.

1 Like