Javascript 更改适合设备分辨率的背景高度

我有一个带有响应图像的页面，作为封面背景

在该图像的底部区域，我有向下箭头，因此用户将知道在该图像下，有带内容的div

背景图像的分辨率为：宽度1920px，高度1000px

当我使用桌面全高清分辨率查看页面时，图像的高度几乎与全高清显示器上的高度一致，但如果我使用高度约为768px的笔记本电脑查看页面，我必须滚动页面以查看图像的其余部分

这是我的密码：

<div class="image fitbg"></div>


.image {
   background-image:url("path_of_the_image");
   height:1000px;
}

.fitbg {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.形象{
背景图片：url（“图片的路径”）；
高度：1000px；
}
fitbg先生{
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
}

如何将图像的高度设置为与设备的高度完全一致

因此，如果设备高度为1000px，图像高度将为1000px，但如果设备分辨率为800px，则图像将从底部裁剪，分辨率将设置为800px

我在几个网站上看到了这些技巧，它们使用Javascript或Javascript库-jQuery，但我不明白它们是如何计算的

我注意到，当我调整浏览器的大小时，背景图像的高度总是在变化，所以图像总是保持在屏幕底部

我怎样才能做到这一点

编辑：这里的直播链接有这个技巧，所以很容易理解我想要达到的目的

---

您可以考虑将元素的高度设置在CSS中，以<代码> 100VH < /C> >，这将意味着可用视口高度的100%，并且不需要任何JavaScript，

您可以看到一个示例，并在下面演示：

---

如果不想滚动，可以执行以下操作：

.image {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

---

正如@Rion Williams所说，你可以通过css 100vh的高度来实现，或者如果你想要更好的向后兼容性（4.3以上的Android浏览器无法正确呈现，如IE低于9），你可以使用javascript（例如jQuery）：

---

如果您使用CSS解决方案，则应创建回退（最小高度：240px），以便在不支持vh高度时，至少渲染240px。

您可以通过两种方法完成此操作。我正试图解释这两个问题

首先 您可以使用Css媒体查询来完成此操作，通过媒体查询，您可以通过设备更改Css。Hare是初学者的链接：

例如：

@media screen and (min-width:1000px) {
  .image {
   background-image:url("path_of_the_image");
   height:1000px;
}
}
@media screen and (max-width:768px) {
  .image {
   background-image:url("path_of_the_image");
   height:768px;
}
}

秒 您还可以使用JQuery捕获设备宽度并更改CSS 兔子是一个简单的例子，你可以用你自己的改变它

$(document).ready(function() {
    //When Window resize or you open page with small screen, wthis code detect size and do someting
    var $window = $(window);
    $window.resize(function resize() { 
                              // 1000 -is a pixel
        if ($window.width() > 1000) {
            //do something, you can remove or add CSS class
        }
        if ($window.width() > 768) {
    //do something, you can remove or add CSS class
        }

    }).trigger('resize');
});

---

将

背景位置

更改为

中底位置

？我已经尝试过了，但它没有达到我想要的效果。当我向下滚动时，它会显示图像的其余部分。整个想法是自动改变高度，所以当我调整浏览器或以较小分辨率查看时，图像将从底部裁剪。你有一个固定的高度1000px，因此它当然需要在较小的屏幕上滚动。在调整大小时，应使用JavaScript将div的高度调整为视口的100%。或者，根据您的浏览器支持要求，使用上面提到的

vh

。您好，Rion。我检查了你的解决方案，效果很好。这与我发布的链接不完全一样，这是不同的方法，但效果很好。谢谢大家!+1.

@media screen and (min-width:1000px) {
  .image {
   background-image:url("path_of_the_image");
   height:1000px;
}
}
@media screen and (max-width:768px) {
  .image {
   background-image:url("path_of_the_image");
   height:768px;
}
}

$(document).ready(function() {
    //When Window resize or you open page with small screen, wthis code detect size and do someting
    var $window = $(window);
    $window.resize(function resize() { 
                              // 1000 -is a pixel
        if ($window.width() > 1000) {
            //do something, you can remove or add CSS class
        }
        if ($window.width() > 768) {
    //do something, you can remove or add CSS class
        }

    }).trigger('resize');
});