jquery - 如何将图像高度设置为整个页面高度的 90%(不是视口(viewport))

Question

我有一个引导页面，我在其中加载了一张覆盖内容的图像，它需要是 height: calc(page height - 150 px) 我将如何实现类似那？ 这是一个 WordPress Bootstrap 模板。非常感谢您的帮助!

非常感谢。 示例 HTML 代码:

<div class="container-fluid" id="uvod">
<img src="img/zirafa.png" class="zirafa" />
    <div class="row clearfix uvod silver"><div class="container">
        <div class="col-md-12 column">
            <div class="text-center"><h2>HEADER 2</h2></div>
            <div class="text">Some text goes here.</div>
        </div>
    </div></div>
</div>

CSS:

img.zirafa {
  width: 100px;
  position: absolute;
  left: 20px;
  z-index: 100;
  top: 100px;
  /*height: 2950px;*/
  width: auto;
}

编辑:作为长颈鹿here (我的网站)- 它应该从上到下。

Answer 1

你可以这样做:

$(window).load(function () {
    sizeImg();
})
$(window).resize(function () {
    sizeImg();
})
var sizeImg = function () {
    var imgH = $(document).height();
    $('img.zirafa').css('height', imgH * 0.9 - 150 + "px");
}

http://codepen.io/anon/pen/embXjR