CSS - Weird White-Space In Border of Image

Question

I have two images that I gave borders to (1px solid black), but in my browser they are rendered with a weird white-space - kind of like an involuntary padding.

The white space is on one side only, but depending on the zoom it can change the side of the border (e.g. suddenly the "pseudo-padding" is no longer on the right, but on the top), or even on two sides at the same time.

.img img {
  width: 100%;
  vertical-align: middle;
  display: block;
  border: 1px solid black;
}

<section class="imgrid">
  <div class="img">
    <img src="http://via.placeholder.com/500x500" />
  </div>
  <div class="img">
    <img src="http://via.placeholder.com/500x500" />
  </div>
</section>

That's about it in terms of relevant code. The images are 500px squares (so 500x500).

Edit: This has nothing to do with the suggested 'similar question' here. I have already tried vertical align before I created this question. I have added width: 100% and vertical-align: middle to the snippet to illustrate this.

The problem looks like so:

on the right

at the bottom

Answer 1

I have the same problem (using Chrome) and came across this thread.

None of these answers helped me, but I found that adding a background-color that matches the border color to the img element resolved the problem for me:

img {
    border: 5px solid #000;
    background-color: #000;
}

Answer 2

Pretty sure if you're seeing this you have a 4k screen set to something other than 100% scaling.

I have two 4k screens, one set to 100% (my laptop screen) and another set to 125% (because it is physically bigger so needs scaling).

Here's a couple images with borders on my 4k laptop screen. The scale factor is 100% so everything is clean:

And then moved over to my external screen. This has DPI setting of 125% (in Windows). In the browser it's 100% scaling, but it's the DPI setting that causes this effect:

With a circle the effect is worse and you end up with a shape that isn't even completely round.

Clearly with 125% scaling a one pixel line will be scaled to 1.25 pixels, which to requires either sub pixel rendering (anti-aliasing) or just snapping to the closest pixel. It seems they don't consider image + 1 pixel border as a single entity and rounding errors are what ultimately gives this behavior.

The fix of setting the background color to the same as the border color sort of works, but you end up with this:

I think the important thing to realize is that it won't affect most people.

Another possible solution is to add an absolute div on top the same width and height and set the border on that. Make sure box-sizing: border-box is set. That will ensure the border is exactly on top of the image. However I don't recommend this in general because it will quickly become unmanageable.