如何制作 gfy 全屏？答案

【问题标题】：How do I make a gfy full screen?如何制作 gfy 全屏？
【发布时间】：2015-06-12 09:18:14
【问题描述】：

我无法调整我的 gfy 的大小。我希望他们占据 100% 的视口。我假设我没有选择正确的类或 ID。我检查了元素。我只是不确定从这里去哪里。我试过制作全屏。我认为我的问题是我没有从他们的样式表中选择正确的类，但我不知所措。感谢您的帮助。

<body>   
    <div class="gfy" data-key="65">
        <img class="gfyitem" data-id="SafeSevereAustralianfreshwatercrocodile" data-controls="false" data-dot="false" data-perimeter="true" data-expand="true">
    </div>         
</body>

相关CSS：

.gfy { 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    background-position: center center; 
    background-color: black; 
    background-size: cover; 
    display: none;
}

.gfyitem {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
 }

【问题讨论】：

尝试将 html 和正文高度设置为 100%。如果 body 中唯一的元素是固定的，则没有任何东西可以给 body 任何高度
谢谢，@charlietfl。我的正文和 html 设置为 100%。我想知道我需要更改的 gfy 中是否有硬编码（这是正确的术语吗？也许我的意思是内联样式）CSS。
@j08691 gfycat 基本上，它是无声的，加载速度比 gif 快。

标签： jquery css gif

【解决方案1】：

我希望这对某人有帮助！

<div class="gfy" data-key="90">
  <img class="gfyitem" data-id="VibrantAncientAmericanbulldog" data-controls="false" data-dot="false" data-perimeter="true" data-expand="true" data-filetype="image">
</div>


$(window).on('keydown', function(e) {
  $('[data-key="' + e.which + '"]').show();
  $('#letter-key').html(String.fromCharCode(event.keyCode)).show();
});

【讨论】：