Question

我有一个垂直图像，我想在加载页面时将其div容器的高度设置为100％。这很好用，但是当我打开检查器或调整浏览器大小时，图像自然会按比例缩小。

CSS：

body {width: 100%; height: 100%};
.container {width: 50%; height: 100%; position: relative};

.bkg-image {
    background: url("../img/image.jpg");
    background-position: right top; 
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    height: 100%;
    min-height: 500px;
    width: 100%;
    left: 0px;
    top: 0px;
}

HTML

<body>
<div class="container">
</div>
<div class="container">
    <div class="bkg-image"></div>
</div>
</body>

我想要的第一件事我可以通过jQuery轻松完成，也就是说，当页面准备好时，使图像具有像素而不是百分比。 Css方法获取高度的计算大小并设置“＆＃39; new＆＃39;高度（以像素为单位）：

jQuery( document ).ready(function() {
   var heightPx = jQuery('.bkg-image').css("height");
   jQuery('.bkg-image').css("height", heightPx);
});

这是一项非常好的工作，但现在让我们说用户将窗口最小化或未完全最大化并加载页面。加载完成后如果用户最大化浏览器窗口，现在图像的高度被转换为像素，它将具有“固定”状态。高度当然不会相对于它的div容器。所以，我请你帮忙的是：

无论浏览器窗口大小如何，我都可以完成相同的行为但是：

如果将浏览器窗口调整为更大的尺寸，则将高度再次转换为100％，并在完成调整大小后再次将其转换为像素。
如果浏览器窗口调整为较小的尺寸，请不要做任何事情（我的意思是，坚持使用已提供的jQuery）。

有可能吗？

Answer 1

你可以通过window.resize（）函数来完成参考文献在此文档中：https://api.jquery.com/resize/

使用前：

$(window).resize(function(){
    var windowHeight = $(window).innerHeight();
    console.log(windowHeight);
});

如果您对窗口宽度特定尺寸使用媒体查询，那就更好了。

Answer 2

您可以尝试使用属性： background-size：cover;

Answer 3

好吧，我不是一个javaScript专家，所以我不会在这里发布我能够编码的混乱js，但我找到了一个灵感来自两件事的解决方案：

第一个是答案here。接受的答案。这让我开始了解$（window）.height（）和$（window）.resize;
然后，我使用了一个非常简单但非常有用的插件：jQuery afterresize event plugin：仅在调整大小时应用某些内容（不是在拖动时，而是在鼠标启动时）。

在窗口调整大小时将百分比高度的背景图像转换为像素高度

3 个答案: