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完全禁用的嵌入式瀏覽器中顯示。正如您可以想象的，爲每個動畫打開一個彈出窗口（或默認瀏覽器選項卡）是不可取的。
如果有什麼不清楚的地方，請告訴。