为什么屏幕图像高度与浏览器控制台图像高度不匹配？

如何解决为什么屏幕图像高度与浏览器控制台图像高度不匹配？

我遇到了一个奇怪的情况。我有一个简单的图片库

.gallery {
    margin-top: 1rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.gallery img {
    height: 100px;
    margin: 1em 1em 0 0;
    flex: 1;
}

当我在浏览器控制台中检查图像时，我看到计算出的高度为100px

https://i.stack.imgur.com/eFcLe.png

但是，当截取屏幕截图并在irfanview图片查看器中对其进行测量时，我看到了150px。 https://i.stack.imgur.com/UtBf4.jpg

我点击了^ 0，然后重置浏览器的缩放比例。为什么会发生？