由于某些原因，我放入img标记中的png/jpg/svg文件会在一些随机大小下出现空白。这里有一个GIF链接：https://gyazo.com/0cbbe95f7c9ca4e6e504448cacd8ea2c
在GIF中，使用Chrome的开发工具调整屏幕大小->设备工具栏。此外，如果我点击Ipad或其他设备，我会看到一条白线。它不是在所有设备上，只是在一些设备上。如果我更改图像或检查其他图像，我会有相同的白线，但在不同的设备/大小上。为什么会发生这种情况？
我检查/尝试的内容
我的图像标签有显示：块
宽度/高度：100%
边距/填充：0px；这是不可能的，因为白线是随机的
对象适合/背景大小：封面、包含、填充、基本所有
溢出：隐藏
垂直对齐：顶部、底部
div标记围绕我的img和div标记。
这里什么都没用。
Chrome的设备工具有可能只是工作不正常吗？我在不同的项目中有一些经验，我必须刷新整个工具栏或在设备之间切换，使其看起来正常，或者使我在工具中添加的一些代码正常工作。在目前的情况下，它并没有解决问题，但可能还有其他一些已知的问题？
这是我的代码
HTML:
<img src="./images/yellow-top.png" alt="top"> <!-- Shows white space at random sizes -->
<div class="bg-yellow"> <!-- height based on its content. Around 800px in my case -->
...
</div>
<img src="./images/yellow-bottom.png" alt="bottom"> <!-- Shows white space at random sizes -->
CSS
img {
display: block;
width: 100%;
}
它为什么会这样做，我该如何解决？
开发工具被放大到其他地方，然后是100%。通过这种方式，它在图像下方显示一个小空白。将它设置回100%修复了它。SVG文件仍然给我一个空白。这可能是SVG文件中的内容。