0
目标：悬停不超过容器宽度：与上显示动画的静态图像。上显示与GIF JS-反应较小的图像：悬停
固定码：
/* wrapper paragraph*/
.rimg {
\t text-align: center;
\t overflow: hidden;
}
/* rely on contents for vertical size, show backgrund centered */
.rimg-gif, .rimg-png {
\t display: block;
\t position: relative;
\t background-size: auto 100%;
\t background-position: center;
\t background-repeat: no-repeat;
\t line-height: 0;
}
/* containers need max-width in IE */
.rimg img, .rimg-gif, .rimg-png {
\t margin: 0;
\t max-width: 99.99999%; /* Opera Mini ignores anything above this % */
\t max-width: calc(100% - 0px); /* for proper browsers */
}
/* hide the GIF background unless hovered */
.rimg-gif:not(:hover) {
\t background-image: none !important;
}
/* hide the static image when hovered */
.rimg-gif:hover img {
\t opacity: 0;
}<p class="rimg">
<span class="rimg-png" style="background-image:url(https://i.imgur.com/iwczbln.png)">
<a class="rimg-gif" target="_blank" href="https://i.imgur.com/TLxp2di.gif" style="background-image:url(https://i.imgur.com/TLxp2di.gif)">
<img src="https://i.imgur.com/iwczbln.png">
</a>
</span>
Description
</p>最终结构：
.rimg仅仅是中心对准东西的容器元素。img是静态图像（语义，印刷，和默认显示）。它悬停时通过不透明隐藏，允许使用上下文菜单同时获取GIF（“链接”）和静态PNG（“图像地址”）的URL。.rimg-gif是悬停时（同时隐藏静态图像）被显示在动画背景GIF。直到悬停才加载。双打为纽带，以实际GIF（移动用户）.rimg-png有一个静态的背景，是有完全让读者不看图像短暂闪烁的GIF完成加载第一帧之前。
有跟这个有几个问题：
在IE < = 11（非边缘）的大小，以适应宽只是彻底不工作 - 的要素溢出容器代替。添加 “最大宽度：100％”，以固定这个（by this explanation）嵌套块。
Opera Mini同样不会调整图像的大小以适合容器宽度，但上述的IE修补程序不起作用。我无法找到任何解释，但Opera Mini仅仅忽略了大约等于100％（> 99.99999％）的最大宽度值。所以我为Opera添加了这个功能，并且为现代浏览器添加了
max-width: calc(100% - 0px)。在StackOverflow的片段预览中，计算出的高度略高于图片的高度，通过它可以看出它简要地从底部开始重复。该问题消失line-height: 0到.rgif-alt，但我不确定这是否是黑客行为。编辑：显然这样的吗？其他选项包括float'ing的元件和使用位置：绝对的，所以我想行高为元素
附加细节漂亮好吗：从降价[-ish产生
- HTML ]扩展名，所以它不会严格影响，如果它看起来讨厌或不。尽管如此，我想避免将图像尺寸/宽高比硬编码到生成的HTML中。
- 直到请求（鼠标悬停）时才尝试没有动画GIF加载，因此two-image trick是不可取的。
- 避免JS的意图是因为具有这些元素的页面可以在JS完全禁用的嵌入式浏览器中显示。正如您可以想象的，为每个动画打开一个弹出窗口（或默认浏览器选项卡）是不可取的。
如果有什么不清楚的地方，请告诉。