jquery - 如何使用 jQuery 获得完整高度

Question

我目前正在使用这个小提琴来尝试识别正确的属性来检查以保持全高背景图像 - 不使用固定定位：

我遇到了一个问题，我不确定如何可靠地解决它。如果将图片标签的大小调整为 100% 高度，如果浏览器的宽度大于图片的宽高比，那么当高度较小时，图片的右侧会出现间隙。

如果将高度设置为 100%，它将调整为可见空间的 100%，但如果向下滚动，图像不会垂直占据整个区域。

$(window).resize(function(){
    // window and body are both incorrect for different reasons
    bgImage.css({height:$(this).height()+'px'});
});

如何让图像始终占据 100% 的可用空间：

a) 如果页面比图片长，使用自动宽度垂直拉伸

b) 如果页面较短，但浏览器视口较大，则拉伸以适应视口，越过内容的底部，但如果将浏览器高度降低到刚好足以显示内容，则不会导致滚动条出现，比调整大小的图像的新高度更小的高度。

我无法将手指放在正确的高度上，以便在降低高度时避免创建滚动条，并在增加浏览器的高度和宽度时避免留下间隙。

注意：PC 版 Safari 在使用 document.ready 时存在问题，我发现使用 window.load 在页面加载时调整图像大小时效果更好。document.ready 在 Firefox 上运行良好。

score 1 · Accepted Answer

$(window).height();   // returns height of browser viewport
$(document).height(); // returns height of HTML document

score 0 · Accepted Answer

您可以使用此 jquery 插件来调整图像大小以适合容器：

score 0 · Accepted Answer

0

好的，是的，固定 imgLiquid 和 css 位置：

在 jsFiddle 中尝试：http: //goo.gl/CWCg8

于 2012-12-09T00:11:28.153 回答

3 回答 3