为什么我网站上的图像无法正确调整大小？

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文件大小相同，但如果我不使用上述两行，在我的手机上，当显示该网站时，图像不会重新调整大小，并且会有一些白色右侧空格 [如何消除从 Android 手机查看的 Html 页面中的空白？]，但为什么我必须设置不同的宽度[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 ] 的情况下，当您将鼠标悬停在它们上时，它们的大小相同。我想一定是图像的宽高比导致了问题，如果底部图像与顶部图像具有相同的宽高比，问题就会消失，所以我在底部添加了一些空白传统_vs_GATE图像，所以宽高比与顶部图像相同，但问题仍然存在，所以我的问题是修复传统_vs_GATE_1和传统_vs_GATE_2图像的好解决方案是什么，这样当我将鼠标悬停在它们上时，它们就会显示相同尺寸？

我知道如果我去掉 2 行 [ # 78,79 ]，这将按照我想要的方式工作，但随后该网站将无法在手机浏览器上正确显示。

Answer 1

对于第一个位置，您可以为 #GATE_Frame_2 指定 78% 的相同宽度，对于父级 div 删除左侧：104px。第二个也一样。将两个图像设置为相同的大小，并从 css 中删除悬停图像的父级 div 的 left.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; }