Question

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

在该图像的底部区域，我向下箭头，因此用户将知道在该图像下，存在带有内容的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;
}

如何根据设备的高度设置图像的高度？

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

我从几个网站看到了这些技巧，他们使用Javascript或JavaScript库 - jQuery，但我无法理解他们如何计算。

我注意到，当我调整浏览器大小时，背景图像的高度始终在变化，因此图像始终保持在屏幕底部。

我怎样才能做到这一点？

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

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

Answer 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并在下方演示：

Answer 2

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

    angular.module('app')
        .component('techs', {
            templateUrl: 'app/techs/techs.html',
            controller: TechsController
         });

Answer 3

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

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

如果你使用CSS解决方案，你应该创建回退（min-height：240px），这样当没有vh高度支持时它将至少渲染240px。

Answer 4

您可以通过两种方式完成此操作。我试着解释它们。

<强>第一您可以使用Css Media查询执行此操作，使用媒体查询您可以使用设备更改css。 Hare是初学者的链接：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 野兔只是一个简单的例子，你可以用自己的方式改变它。

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

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

4 个答案: