Блог

По какой-то причине файлы png / jpg / svg, которые я помещаю в свой тег img, дают при некоторых случайных размерах пробел. Вот ссылка с GIF: https://gyazo.com/0cbbe95f7c9ca4e6e504448cacd8ea2c

В GIF im изменяет размер экрана с помощью Chrome его инструменты разработчика -> панель инструментов устройства. Также, если я нажимаю Ipad или какое-либо другое устройство, я вижу белую линию. Это не на всех устройствах, а только на некоторых. Если я изменю изображение или проверю одно из других моих изображений, у меня будет такая же белая линия, но на разных устройствах / размерах. Почему это происходит?

Что я проверял / пробовал

Мой тег изображения имеет вид display: block;
ширина / высота: 100%;
margin / padding: 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.