2015-04-07 47 views
0

我無法調整我的gfy的大小。我希望他們佔用100%的視口。我假設我沒有選擇正確的課程或ID。我檢查了這個元素。我只是不確定該從哪裏出發。我嘗試了全屏。我認爲我的問題是我沒有從他們的樣式表中選擇正確的類,但我很茫然。我感謝任何幫助。如何製作gfy全屏?

<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%) 
} 
+2

什麼是gfy? – j08691

+0

嘗試將html&body height設置爲100%。如果身體內唯一的元素是固定的,沒有任何東西給身體任何高度 – charlietfl

+0

謝謝,@charlietfl。我的身體和HTML設置爲100%。我想知道是否有一個硬編碼(是否是正確的術語?也許我的意思是內聯樣式),我需要改變gfy中的CSS。 – Rachel

回答

0

我希望這可以幫助別人!

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