Pasted images are oversized when display scaling is set to 200%

Custom CSS & Theme Design
1

Problem: you take a screenshot in your favorite snipping app and paste it into obsidian, and for some reason the default size of the pasted image is larger than the source.

Example Text → pasted below

image

Like myself, you probably have a high resolution display and you have set Windows Display Scaling to 200% or some other value greater than 100%.

You probably already know you can resize the image. But do you really want to do that for every image you paste?

You can change the display of all images to appear 1:1 with the following CSS:

.markdown-rendered img,
.markdown-source-view.mod-cm6 .cm-content img {
  width: auto;
  max-width:200%;
  height: auto;
  zoom: 0.5;
}

Zoom 0.5 is the key element here.

The max-width is 200% to keep the images from over-running the column width, which is the normal behavior.

Setting zoom to 0.5 is appropriate if your display scaling is set to 200%.
If your display scaling is 150% then set max-width to 150% and zoom to 0.67.
If your display scaling is 250% then set max-width to 250% and zoom to 0.4.

Obviously, this doesn’t resize the image itself. You will need to enable this snippet on any device where you are viewing this vault, but it is super easy to enable.

I had a hard time finding this solution, so I’m posting this to help the community. Give a :purple_heart: if it works for you, or reply if you have any tweaks that work better for you.

2

Ok, I learned you can’t edit a post.

I posted before I corrected the CSS, so here’s a better version:

/* Display images at zoom 0.5 to account for display scaling */
.image-embed img:not([width]) {
  width: auto;
  max-width:200%;
  height: auto;
  zoom: 0.5;
}
3

Once you make a few more posts, reply to folks, etc., you’ll be able to edit your posts. It’s a new-user trust level feature of the forum to prevent spam and stealth editing. Thanks for understanding.