自动检测屏幕高度

Question

我有以下代码：

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

我想知道是否有一种方式可以通过脚本自动检测用户屏幕高度，然后更改＆＃34; height: ???;＆＃34;到用户屏幕高度。

Answer 1

您可以使用： vh css高度单位（垂直高度单位），1 vh =视口垂直高度的1％。 它可能不适用于IE和Edge：请参阅here

Answer 2

您可以使用以下代码动态设置高度：

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

Answer 3

您可以使用视口单元，例如vh。例如：

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