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

【问题标题】：Change background height that fits with the device resolution更改适合设备分辨率的背景高度
【发布时间】：2016-04-13 04:15:14
【问题描述】：

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

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

背景图片分辨率：宽1920px，高1000px。

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

这是我的代码：

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

如何将图片高度设置为与设备高度一致？

所以，如果设备的高度为1000px，则图片的高度为1000px，但如果设备的分辨率为800px，则图片将从底部裁剪，分辨率设置为800px。

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

我注意到，当我调整浏览器的大小时，它们的背景图像的高度总是在变化，因此图像总是停留在屏幕底部。

我怎样才能做到这一点？

编辑：这是具有此技巧的实时链接，因此很容易理解我想要实现的目标。

http://next-dc.com/work/jack-daniels-holiday-songs/

【问题讨论】：

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

标签： javascript jquery css

【解决方案1】：

您可以考虑将 CSS 中元素的高度设置为 100vh，这意味着 100% 的可用视口高度并且不需要任何 Javascript，assuming that your browser supports the viewport-based units：

.image {
   background-image:url("path_of_the_image");
   background-position: center center;
   background-repeat: no-repeat;
   background-size: cover;
   height: 100vh;
}

您可以看到live example of what this might look like here 并在下面演示：

【讨论】：

嗨，里昂。我检查了您的解决方案，效果很好。它与我发布的链接不完全一样，它是不同的方法，但它工作正常。谢谢！ +1

【解决方案2】：

如果你不希望它滚动，你可以这样做：

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

【讨论】：

【解决方案3】：

正如@Rion Williams 所说，您可以通过 css 100vh 高度来做到这一点，或者如果您想要更好的向后兼容性（4.3 之前的 Android 浏览器不会正确呈现它，因为 IE 低于 9），您可以使用 javascript（以 jQuery 为例）：

$(document).ready(function () {
    $('.image').height( $(window).height() )
})

如果你使用 CSS 解决方案，你应该创建后备（最小高度：240px），这样当不支持 vh 高度时，它至少会呈现 240px。

【讨论】：

【解决方案4】：

您可以通过 2 种方式做到这一点。我试图解释他们两个。

第一您可以使用 Css 媒体查询来执行此操作，使用媒体查询您可以通过设备更改 css。野兔是初学者的链接：Media Query

例子：

@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 hare是一个简单的例子，你可以自己改变它。

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

【讨论】：