Почему изображения на моем сайте не меняются правильно?

Question

На моем сайте [https://gatecybertech.com], почему изображения неправильно меняют размеры?

(1) Первое место - "GATE_Frame_1" и "GATE_Frame_2", в Строка # 67,68, я должен использовать следующее, чтобы они выглядели одинаково:

  #GATE_Frame_1 { width: 78%; height: auto; }
  #GATE_Frame_2 { width: 98%; height: auto; }

Файлы png этих изображений имеют одинаковый размер, и все же, если я не использую выше 2 строк, на моем мобильном телефоне, когда сайт отображается, изображения не изменятся в размерах, и с правой стороны будет некоторое пустое пространство [ Как избавиться от пустого пространства на Html странице Просмотр с Android телефона? ], но почему я должен устанавливать ширину по-разному [78% и 98%], чтобы они выглядели одинаково, работает нормально, я просто не понимаю, почему

(2) В строке # 78,79 я должен использовать следующие строки, чтобы изображения выглядели одинаково:

  #Traditional_vs_GATE_1 { width: 96%; height: auto; }
  #Traditional_vs_GATE_2 { width: 99.6%; height: auto; }

Это лучшее, что я мог делаю, я пробовал несколько разных комбинаций, это лучшее совпадение, но не на 100% одинакового размера, как вы можете видеть, если вы наведете на них курсор мыши [последнее большое изображение на веб-сайте внизу], он изменит размер всего на несколько пикселей, но в случае первого изображения [GATE_Frame_1 / GATE_Frame_2], когда вы наведете на них курсор мыши, они будут такой же размер. Я полагал, что это должно быть отношение ширины к высоте изображений, которые вызвали проблему. Если нижнее изображение имеет такое же соотношение w / h, как и верхнее изображение, проблема исчезнет, ​​поэтому я добавил некоторое пустое пространство к нижней части для изображений Traditional_vs_GATE, поэтому отношение w / h такое же, как и у верхнего изображения, но проблема все еще существует, поэтому мой вопрос в том, что является хорошим решением для исправления изображений Traditional_vs_GATE_1 & Traditional_vs_GATE_2, чтобы при наведении на них курсора они показать тот же размер?

Я знаю, если я избавлюсь от 2 строк [# 78,79], это будет работать так, как я хочу, но тогда сайт не будет правильно отображаться на браузер мобильного телефона.

Answer 1

Для первого места вы можете присвоить # GATE_Frame_2 такую ​​же ширину 78%, а для родительского div удалить слева: 104px. Для второго то же самое. Дайте обоим изображениям одинаковый размер и удалите их слева от css для родительского раздела изображения при наведении

.pic-container-2 .pic-hover {left: 0;}
#Traditional_vs_GATE_2 {width: 96%;}
#Traditional_vs_GATE_ {width: 96%;}

.pic-container-1 .pic-hover {left: 0;}
#Traditional_vs_GATE_2 {width: 78%;}
#Traditional_vs_GATE_1 {width: 78%;}

Answer 2

Из ответа @Ru NE я получил вдохновение, я исправил нижнее изображение, так что теперь оно показывает тот же размер, когда наведешь на него мышью следующее изменение:

  .pic-container-2 .pic-hover{position:absolute; top:0px; left:18px; display:none;}
  .pic-container-2:hover .pic-hover{display:block;}

  #Traditional_vs_GATE_1 { width: 96%; height: auto; }
  #Traditional_vs_GATE_2 { width: 99.5%; height: auto; }