I've been using the Obsidian Web Clipper a lot lately. Sometimes for bits and pieces of pages and sometimes full articles to read later. A nice feature is that the clipper grabs links to the images rather than taking up your storage with them. The side effect to that is that the images can be huge when viewing your note and you have to do a lot of scrolling to get past them. So, I set out to find a solution.

I found some nifty CSS code created by Kepano that got me about 99% of the way there. What it does it let you click and hold on an image and view it full screen. That itself is pretty cool. I added a line to the code to make it size the images down to something more manageable. Since you can click+hold and still see the whole image it gives you a very nice working solution.

Examples

This screenshot is a page in my vault with an image from the International Space Station. The whole image isn't visible without scrolling down.

Here is the same page after I've applied the CSS. Other elements are clearly visible because the images aren't massive.

And here is the image when I'm click+holding on it. Look ma, no scrolling and you can see the whole thing!

The code

You'll be adding custom CSS to Obsidian. If you've never done that, this guide will show you what you need to do. CSS snippets - Obsidian Help Note, where it says "Create a css file", that is a simple text file with a name like "imagesize.css" or something equally clever. You'll see the name in your obsidian settings so name it something that makes sense to you. And don't put spaces in the name.

Paste the code below into your cleverly named css file. Save. Refresh in Obsidian. Done.
Caveats: There could be conflicts with your theme. This seems to work fine in Minimal and Border. In the default theme, it appears to only resize the images and not allow for the click+hold.
Improvements and other ideas welcome.

/*
author: Kepano
source: https://forum.obsidian.md/t/image-zoom-click-hold-to-expand-images/5164?u
purpose: Clicking and holding on an image expands it to full size
=====
modified by: TechLifeWeb
source: https://techlifeweb.com/blog/2025/05/post-2025-05-30T175849/
date: 2025-05-30
purpose: Modifies images so the don't take up as much screen space
*/

.view-content img {
  max-width: 100%;
  max-height: 2%; /*This is the only change. Modify the value to your liking */
  cursor:zoom-in;
}

.view-content img:active {
  cursor:zoom-out;
}
.view-content .markdown-preview-view img[referrerpolicy='no-referrer']:active,
.view-content .image-embed:active {
  background:var(--background-primary);
  cursor:zoom-out;
  display:block;
  z-index:200;
  position:fixed;
  max-height:100%;
  max-width:100%;
  height:100%;
  width:100%;
  object-fit:contain;
  margin:0 auto;
  text-align:center;
  padding:0;
  left:0;
  right:0;
  bottom:0;
}
.view-content .image-embed:active img {
  top:50%;
  transform:translateY(-50%);
  padding:0;
  margin:0 auto;
  width:100%;
  max-height:100vh;
  object-fit:contain;
  left:0;
  right:0;
  bottom:0;
  position:absolute;
  opacity:1;
}