在 :hover 上显示带有 GIF 的无 JS 响应图像

Question

目标：在悬停时显示动画的静态图像不超过容器宽度。

固定码：

/* wrapper paragraph*/
.rimg {
 text-align: center;
 overflow: hidden;
}
/* rely on contents for vertical size, show backgrund centered */
.rimg-gif, .rimg-png {
 display: block;
 position: relative;
 background-size: auto 100%;
 background-position: center;
 background-repeat: no-repeat;
 line-height: 0;
}
/* containers need max-width in IE */
.rimg img, .rimg-gif, .rimg-png {
 margin: 0;
 max-width: 99.99999%; /* Opera Mini ignores anything above this % */
 max-width: calc(100% - 0px); /* for proper browsers */
}
/* hide the GIF background unless hovered */
.rimg-gif:not(:hover) {
 background-image: none !important;
}
/* hide the static image when hovered */
.rimg-gif:hover img {
 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 ("link") 和静态 PNG ("image address") 的 URL。
.rimg-gif 是悬停时显示的动画背景 GIF（同时隐藏静态图像）。它直到悬停才加载。兼作实际 GIF 的 link（对于移动用户）
.rimg-png 有一个静态背景并且只是为了 reader 在 GIF 完成加载第一帧之前看不到图像短暂闪烁。

这有一些问题：

~~在 IE<=11（非 Edge）中完全调整大小以适应宽度是行不通的 - 元素会溢出容器。~~

将 "max-width: 100%" 添加到嵌套块修复了此问题 (by this explanation)。
~~Opera Mini 同样不会调整图像大小以适应容器宽度，但上述针对 IE 的修复无效。~~

我找不到对此的任何解释，但事实证明 Opera Mini 只是忽略了大约等于 100% (>99.99999%) 的最大宽度值。所以我为 Opera 添加了它，为现代浏览器添加了 max-width: calc(100% - 0px)。
在 Whosebug 的代码片段预览中，计算出的高度略高于图像的高度，可以从它在底部短暂开始重复中看出这一点。通过将 line-height: 0 提供给 .rgif-alt，问题就消失了，但我不确定这是否是 hack。

编辑：显然是这样？其他选项包括浮动元素和使用 position: absolute，所以我猜 line-height 对元素

其他详细信息：

HTML 是从 markdown[-ish] 扩展生成的，因此它看起来是否令人讨厌并不严格。不过，如果可能的话，我想避免将图像尺寸/纵横比硬编码到生成的 HTML 中。
尝试在请求（鼠标悬停）之前不加载动画 GIF，因此 two-image trick 不可取。
之所以避免使用 JS，是因为包含此类元素的页面可以在完全禁用 JS 的嵌入式浏览器中显示。可以想象，为每个动画打开一个弹出窗口 window（或默认浏览器的选项卡）是不可取的。

如有不明之处，请告知。

Answer 1

经过反复试验，我设法自己解决了问题，因此我在问题中添加了有关解决方案和最终（工作）代码的注释。

我不是 100% 满意在 Android 上打开一个新标签（理想情况下应该在单击时播放），但是所有经过测试的浏览器在按返回时都会关闭此类弹出标签所以也许还不错。我添加了一个 "play" 按钮，它还兼作移动设备的第一个触摸事件吸收器（最初完全覆盖 link，之后调整为 0% 宽度允许单击 link 的短暂延迟）。这适用于现代浏览器（第一次点击时触发 :hover 和动画播放，第二次点击时可以打开 link）和 Opera Mini（它只打开带有 GIF 的弹出选项卡）。例如，您可以在 here 中看到这一点。

在 :hover 上显示带有 GIF 的无 JS 响应图像

JS-less responsive images with GIF shown on :hover

css

internet-explorer

image

opera-mini