当不同的窗口大小时，img 标签似乎给出了空白

Question

For some reason png/jpg/svg files that I put into my img tag give at some random sizes a whitespace. Here is a link with a GIF: https://gyazo.com/0cbbe95f7c9ca4e6e504448cacd8ea2c

In the GIF im resizing the screen with Chrome its developer tools -> device toolbar. Also if I click Ipad or some other device I see a white line. Its not on all devices but only on some. If I change image or check one of my other images I have the same white line but on different devices/sizes. Why does this happen?

What I checked/tried

My image tag has the display: block;
width/height: 100%;
margin/padding: 0px; Which it could never be since the whiteline is quite random.
object-fit/background-size: cover, contain, fill, everything basicly;
overflow: hidden;
vertical align: top, bottom;
div tag around my img and div tag.

Nothing here worked.

Is it possible that Chrome its device tool thingy is just not working correcty? I have some experience with it on different projects that I had to refresh the complete toolbar or switch between device to make it look normal or to make some code I added in the tools working. In the current case it doesn't fix it but maybe there are some other known issues?

This is my code

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%;
}

Why does it do this and how can I fix this?

Answer 1

Developer tools was zoomed in at something else then 100%. This way it shows a small whitespace below an image. Setting it back to 100% fixed it. SVG file still gives me an whitespace. This is probably something within SVG files.