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

【问题标题】：Turn Background image with percentage height into pixels height on window resize在窗口调整大小时将具有百分比高度的背景图像转换为像素高度
【发布时间】：2017-01-10 09:40:05
【问题描述】：

我有一个垂直图像，每当加载页面时，我希望其 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 方法获取高度的计算大小并设置“新”高度（以像素为单位）：

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

这做得很好，但现在假设用户已将窗口最小化或未完全最大化并加载页面。如果用户最大化浏览器窗口，则加载完成后，现在图像的高度已转换为像素，它将具有“固定”高度，当然不会相对于其 div 容器。所以，我请你帮忙的是：

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

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

有可能吗？

【问题讨论】：

如果您已经将高度设置为百分比，那么为什么需要将其转换为像素百分比将自动处理窗口调整大小。
查看以下链接。它可能对您的问题有用.. Example
@Manish 谢谢:) 问题是当浏览器窗口缩小时我不想要带有百分比的图像，因为页面的所有内容都会被弄乱。但是我想要它在页面第一次加载时（以像素为单位设置宽度最小高度，以防万一）。这是我正在做的网站中的一个非常特殊的页面。通常，99.9% 只是百分比效果很好，我不需要转换。
@Visveswaran 谢谢：）我会检查一下。

标签： javascript jquery css

【解决方案1】：

你可以通过 window.resize() 函数来实现参考在此文档中：https://api.jquery.com/resize/

用法示例：

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

如果您使用媒体查询来获取特定于窗口宽度的尺寸会更好。

【讨论】：

谢谢:) 现在已经解决了，但下次我会考虑你的回答与媒体查询的使用有关。

【解决方案2】：

您可以尝试使用属性：背景尺寸：封面；

【讨论】：

谢谢:) 我试过了，但是 background-size: contains 确实做得很好，因为图像宽度小于包含它的 div 宽度，我想保留它这边。

【解决方案3】：

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

第一个答案是here。接受的答案。它让我了解了 $(window).height() 和 $(window).resize;
然后，我使用了一个非常简单但非常有用的插件：jQuery afterresize event plugin：仅在调整大小完成时应用某些东西（不是在拖动时，而是在鼠标抬起时）。

【讨论】：