Question

我无法调整我的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%)
 }

Answer 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();
});

如何制作全屏幕？

1 个答案: