Плющит изображение

Первый блок на сайте высотой 100vh (занимает всю область)

в блоке есть картинка с заданной высотой 100% и паддингом сверху 20%.

Если обновить страницу с очисткой кеша(ctrl+f5) изображение отображается как надо, но если просто обновить страницу то картинку плющит.

на телефоне так же четко видно проблему. при открытие картинка не правильного размера, но если сделать какие то манимуляции, например повернуть экран туда и обратно, размер становится нормальным. подсветил падинг для наглядности.

никак не пойму почему так происходит.

там родительский див с абсолютным позиционирование и относительных единицах, но я не пойму как это может влиять на отображение картинки при том что в какой то момент все работает, а в какой то нет

картинки для понимания

живой пример https://go2cut.ru/afU