Html 响应性设计：基于图像的导航>；平均缩放图像

情况： 我为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}

问题：导航在大屏幕上运行良好，但问题始于缩小视口。由“最大宽度”控制的图像彼此独立，在缩小屏幕时不会以类似的速率缩放。当然，这与首先要缩放的最大图像（到达视口边界）和之后要缩放的较小图像有关。在我的例子中：公文包图像将比主图像更早缩放。这会导致一个奇怪的导航，因为图像在某些点上大小不同

我考虑的其他一些因素：

• 我可以为更小的屏幕制作更小的图像，但这会使很多图像负载过大

• 我可以使所有图像的大小与最大的图像相同。但这意味着较小的单词将在单词的左右两侧有空格。这个空白还将激活悬停状态，这使它看起来很奇怪（悬停状态会在我不在链接本身上时激活（视觉上，而不是技术上）

问题： 在缩小视口时，如何使用基于图像的导航并平均缩小导航链接/图像

我制作了一个JSFIDLE进行测试：

---

提前感谢。

我已经看了一段时间了，我开始认为这是不可能的。问题的根源在于，每个图像都需要知道最大的图像，或者至少每个

都需要知道其他图像的动态高度，这在某种DOM中是不可能的即使使用flexbox，我也无法实现这一点

---

我的建议是使用PNG透明度创建相同宽度的每个图像，然后只需使用图像贴图在每个图像的按钮区域上激活悬停状态。这需要一些工作，但我想不出更好的方法。有关制作图像贴图的方法，请参阅。

我已经研究了一段时间，现在开始思考这个问题不可能。问题的根源在于，每个图像都需要知道最大的图像，或者至少每个

都需要知道其他图像的动态高度，这在某种DOM操作中是不可能的。即使使用flexbox，我也无法做到这一点

---

我的建议是使用PNG透明度创建相同宽度的每个图像，然后只需使用图像贴图在每个图像的按钮区域上激活悬停状态。这需要一些工作，但我想不出更好的方法。有关制作图像贴图的方法，请参阅。

谢谢，是的，我正在考虑一组规则，如js:If the viewport触摸最大的图像所有图像都开始缩小，否则什么都不会发生…类似的事情。但是我不熟悉编写此代码（如果可能的话）。我会查看图像地图，然后一起切换到不同的导航。谢谢，是的，我在考虑一组规则，比如js：如果视口接触到最大的图像，所有图像都开始缩小，否则什么都不会发生……诸如此类。但我不熟悉编写此代码（如果可能的话）。我将查看图像地图，否则将一起切换到不同的导航。