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

Posted 2023-03-06

【中文标题】带有 GIF 的无 JS 响应式图像在 :hover 上显示

【英文标题】：JS-less responsive images with GIF shown on :hover

【发布时间】：2018-04-10 06:38:50

【问题描述】：

目标：在 :hover 上显示动画且不超过容器宽度的静态图像。

固定代码：

/* 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（“链接”）和静态 PNG（“图像地址”）的 URL。 .rimg-gif 是悬停时显示的动画背景 GIF（同时隐藏静态图像）。直到悬停才加载。兼作指向实际 GIF 的链接（适用于移动用户） .rimg-png 有一个静态背景，只是为了让读者在 GIF 完成加载第一帧之前看不到图像短暂闪烁。

这有几个问题：

在 IE

向嵌套块添加“最大宽度：100%”修复了此问题 (by this explanation)。

Opera Mini 同样不会调整图像大小以适应容器宽度，但上述针对 IE 的修复无效。

我无法找到任何解释，但事实证明 Opera Mini 只是忽略了大约等于 100% (>99.99999%) 的最大宽度值。所以我为 Opera 添加了它，并为现代浏览器添加了 max-width: calc(100% - 0px)。

在 *** 的 sn-p 预览中，计算出的高度略高于图像的高度，可以通过它在底部开始重复短暂地看到。通过将line-height: 0 提供给.rgif-alt，问题就消失了，但我不确定这是否是黑客攻击。

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

其他细节：

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

如果有什么不清楚的，请说出来。

【参考方案1】：

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

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