情况：我为一个html5网页创建了一个全屏停留导航，其中包括显示为图像的链接。我使用图像是因为特殊的悬停效果，这在代码中是不可能的。这意味着我的链接，如主页、关于、公文包、联系人，都是由图像（而不是文本）组成的，并显示在列表中。
我为每个链接创建了两个图像：1个用于正常状态，1个用于悬停状态。我使用了此处显示的替换img技术：
.foo img:last-child{display:none}
.foo:hover img:first-child{display:none}
.foo:hover img:last-child{display:inline-block}
问题：导航在大屏幕上运行良好，但问题开始于缩小视口。由最大宽度控制的图像表现为彼此独立，并且在缩小屏幕时不会以类似的速率缩放。当然，这与先缩放的最大图像（到达视口边界）和后缩放的较小图像有关。在我的情况下：公文包图像将比主页图像更早缩放。这导致导航看起来很奇怪，因为图像在某个点上的大小不同。
我考虑的其他一些因素：
我可以为较小的屏幕制作较小的图像，但这会使许多图像负载过重。
我可以使所有图像的大小与最大的图像相同。但这意味着较小的单词在单词的左右两侧都有空格。这个空的空间也会激活悬停状态，这会让它看起来很奇怪（悬停状态在我不在链接本身的时候激活（视觉上，而不是技术上）。
问题：在缩小视口时，如何使用基于图像的导航并同样缩小导航链接/图像？
我制作了一个用于测试的JSFiddle：DEMO
提前谢谢。
我已经研究了一段时间，我开始认为这是不可能的。问题的根源在于，每个图像都需要知道最大的图像，或者至少每个<li>都需要知道其他图像的动态高度，这在某种DOM操作中是不可能的。即使使用flexbox，我也无法做到这一点。
我的建议是，使用PNG透明度创建相同宽度的每个图像，然后简单地使用图像映射，只在每个图像的按钮区域上激活悬停状态。这有点麻烦，但我想不出更好的办法了。请参阅这个StackOverflow问题，了解制作图像映射的方法。