html - CSS - 图像边框中的奇怪空白

Question

我有两张图片我给了边框(1px 纯黑色)，但在我的浏览器中它们呈现了一个奇怪的空白 - 有点像无意识的填充。

空白仅在一侧，但根据缩放，它可以改变边框的一侧(例如，突然“伪填充”不再位于右侧，而是位于顶部)，甚至两侧同时。

.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>

相关代码就到此为止。图片是 500 像素的正方形(所以是 500x500)。

编辑:这与建议的“类似问题”无关here .在创建此问题之前，我已经尝试过垂直对齐。我在代码片段中添加了 width: 100% 和 vertical-align: middle 来说明这一点。

问题看起来是这样的:

on the right

at the bottom

Answer 1

很确定，如果您看到此内容，则您的 4k 屏幕设置不是 100% 缩放比例。

我有两个 4k 屏幕，一个设置为 100%(我的笔记本电脑屏幕)，另一个设置为 125%(因为它在物理上更大，所以需要缩放)。

这是我的 4k 笔记本电脑屏幕上的几张带边框的图片。比例因子为 100%，所以一切都很干净:

然后转到我的外部屏幕。这具有 125% 的 DPI 设置(在 Windows 中)。在浏览器中它是 100% 缩放，但这是导致这种效果的 DPI 设置:

如果是圆，效果会更差，最终得到的形状甚至不是完全圆的。

很明显，在缩放 125% 的情况下，一个像素线将缩放为 1.25 像素，这需要子像素渲染(抗锯齿)或仅捕捉到最近的像素。他们似乎没有将图像 + 1 像素边框视为单个实体，舍入误差最终导致了这种行为。

将背景颜色设置为与边框颜色相同的修复有点奏效，但你最终会得到这样的结果:

我认为重要的是要意识到它不会影响大多数人。

另一种可能的解决方案是在顶部添加一个宽度和高度相同的绝对 div，并在其上设置边框。确保设置了 box-sizing: border-box。这将确保边框正好位于图像的顶部。但是我一般不推荐这样做，因为它很快就会变得难以管理。