Автоматическое определение высоты экрана

Question

У меня следующий код:

<img style="width:100%; height: ??? ;" id="FrontImg" src="Content/Img/Glow-Keyboard-Wallpaper-High-Resolution-Photos-445152.jpg" /> 

Интересно, если есть сома рода образом, что с помощью скрипта автоопределение пользователи экран Hight, а затем изменяет «height: ???;» для пользователей высота экрана.

Answer 1

Вы можете установить высоту динамически с кодами ниже:

$(function(){ 
    var height = $(window).height(); 
    $('#FrontImg').css("height", height + "px"); 
}) 

Answer 2

Вы можете использовать: vh единица измерения высоты css (единица вертикальной высоты), 1 vh = 1% от вертикальной высоты окна просмотра. Это может не работать на IE и Гурт: см here

Answer 3

Вы можете использовать окно просмотра единицу, как ВЕ. Например:

img{ 
    width:100%; 
    height:100vh; 
} 

Check browser support.

Но это приведет к искажению изображения.

Лучший способ сделать это - использовать контейнер.

CSS:

.img_container{ 
    width:100% 
    height:100vh;/*viewport unit*/ 
    background:url('url_to_your_image') no-repeat; 
    background-size:cover; 
}