Question

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

固定代码：

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

最终结构：

.rimg只是用于居中对齐的容器元素。
img是静态图像（用于语义，打印和默认显示）。它在悬停时通过不透明度隐藏，允许使用上下文菜单获取GIF的URL（＆＃34;链接＆＃34;）和静态PNG（＆＃34;图像地址＆＃34;）。
.rimg-gif是悬停时显示的动画背景GIF（隐藏静态图像时）。它在悬停之前不会加载。双打作为实际GIF的链接（适用于移动用户）
.rimg-png具有静态背景，只有这样，读者才能看到图像在GIF加载第一帧之前暂时闪烁。

这有一些问题：

~~在IE＆lt; = 11（非边缘）大小调整以适应宽度时，直接无法正常工作 - 元素会溢出容器。~~

添加＆＃34;最大宽度：100％＆＃34;嵌套块固定了这个（by this explanation）。
~~Opera Mini同样没有调整图像大小以适应容器宽度，但上述IE的修复没有任何效果。~~

我无法找到任何解释，但事实证明Opera Mini只是忽略大致等于100％（> 99.99999％）的最大宽度值。所以我为Opera添加了这个，为现代浏览器增加了max-width: calc(100% - 0px)。
在StackOverflow的片段预览中，计算出的高度略高于图像的高度，可以通过它在底部重复开始重复看到。将line-height: 0提交给.rgif-alt，问题就会消失，但我不确定这是不是黑客攻击。
编辑：显然是这样吗？其他选项包括浮动元素和使用position：absolute，所以我认为行高非常适合元素

其他详情：

HTML是从markdown [-ish]扩展名生成的，因此如果它看起来很讨厌则不严格。我想尽可能避免将图像尺寸/宽高比硬编码到生成的HTML中。
尝试在请求之前没有动画GIF加载（鼠标悬停），因此two-image trick不是首选。
避免使用JS的意图是因为具有这些元素的页面可以在嵌入式浏览器中显示，并且完全禁用了JS。您可以想象，为每个动画打开一个弹出窗口（或默认浏览器＆＃39;标签）是不可取的。

如果有什么不清楚，请告诉。

Answer 1

经过一些试验和错误后，我设法自己解决了问题，因此我在解决方案和最终（工作）代码中添加了注释。

我对在Android上打开新标签感到非常满意（理想情况下应该在单击时播放），但是所有经过测试的浏览器在按下Back时会关闭这样的弹出式标签，所以也许它可能会出现问题。不太糟糕。我添加了一个＆＃34; play＆＃34;按钮，它也兼作移动设备的第一个触摸事件吸收器（最初完全覆盖链接，在短暂延迟后调整为0％宽度以允许单击链接）。这适用于现代浏览器（触发：在第一次点击时悬停和动画播放，可以在第二次点击时打开链接）和Opera Mini（只需打开带有GIF的弹出选项卡）。例如，您可以在行动here中看到这一点。

带有GIF的无响应图像显示在：悬停

1 个答案: