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）如果页面较短，但浏览器视口较大，则拉伸以适应视口，超出内容的底部，但如果将浏览器高度降低到足够的范围，则不会导致出现滚动条显示内容，比调整大小的图像的新高度更小。

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

作为一个注释：Safari for PC在使用document.ready方面存在问题，我发现使用window.load在页面加载时处理图像大小调整时效果更好。 document.ready在firefox上运行正常。

Answer 1

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

Answer 2

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

Answer 3

好的，是的，imgLiquid和css位置已修复：

尝试使用jsFiddle：http://goo.gl/CWCg8