Question

我有一个引导页面，在其中我正在加载一个覆盖内容的图像，它需要height: calc(page height - 150 px)我将如何实现这样的目标？这是一个WordPress引导程序模板。非常感谢你的帮助！

非常感谢。示例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

如何将图像高度设置为整页高度的90％（不是视口）

1 个答案: