我想在悬停时显示另一个图像，由于主页的布局，我需要使用精灵来完成它。我的工作正常，但是我使用固定的宽度和高度来容器。 你可以在这里看到我的JSFiddle：
http://jsfiddle.net/mckeene/fhk0byqt/4/
当我想让它变得敏感时，问题就出现了。我可以使用max-width：100％，但身高呢？
答案 0 :(得分：0)
好的，此解决方案基于已知的事实，即当给定百分比值时，某些属性（如padding-top和margin-top）将根据 width 计算得出。元素而不是它的高度。
使用padding-top可以使响应图像的已知尺寸所需的元素“高” - 我根据图像的尺寸使用了66.54%的值（一半）图像高度除以宽度，乘以100）以跨越容器元素达到所需的高度。
现在通常首先显示图像的上半部分，然后在悬停时显示后半部分，我会使用绝对定位 - 但我们不能在这里使用top，因为该属性的百分比值将基于高度。但幸运的是，正如已经提到的，margin-top是其中一个属性，其中百分比是根据宽度计算的 - 所以我们可以在这里使用margin-top: -66.54%将图像“拉”到其容器的填充上以显示它的上半部分，然后加倍（margin-top: -133.1%）在悬停时将其拉得更高，以显示其下半部分。