改变宽度使高度适合窗口屏幕？

Question

我正在与一个响应网站工作，我希望主页不需要任何滚动。现在，它有一个页眉(239 of高)和一个脚(94 of高)，然后猫头鹰旋转木马在页面中间滑动图像。猫头鹰旋转木马上的CSS宽度为100%，显示了整个图像。但是，设置滑块的方式，如果我将容器高度更改为window.innerHeight，它会在滑块中对图像进行裁剪(仍然是100%宽度)。

我怎么能让猫头鹰旋转木马成为一个相对高度，将宽度更改为精确的%宽度，从而使页眉+猫头鹰旋转木马+页脚都适合用户浏览器窗口而不必滚动？

编辑：

<div id="post-111" class="post-111"> 
<div class="sy-box">
<div class="sy-slides-wrap">
<div class="sy-slides-crop">
<ul class="ken-slider">
<li class="sy-slide kenburns""><img alt="" src="image.jpg"></li>
<li class="sy-slide kenburns""><img alt="" src="image.jpg"></li>
</ul>
</div></div></div></div>

这是猫头鹰的基本结构。并且有<'header'>为239 of和<‘fo脚’>为94 of =‘239px 3’>高.图像缩放以适应..sy方框的宽度和最大高度:无；

这是一个非常好的，非常类似的例子，我正在研究。头部，脚，猫头鹰在中间。您如何使用此页面并使其适合屏幕(无需裁剪图像，只需缩放使其在页面上适合)？http://www.isidrophotographer.com

Answer 1

jsfiddle.net/q6rL4jkk/4。我认为JS工具imgLiquid可以做到这一点。固定页眉/页脚，图像缩放尽可能大，不偏斜在中间和没有滚动条。现在只需要想办法把它放到我的网站上。

$(function() {    
    $(".sy-slides-wrap").imgLiquid({
        fill: false,
        horizontalAlign: "center",
        verticalAlign: "50%"
    });

});

Answer 2

最简单的方法是在CSS中使用vh和vw单元。当然，除了IE之外，其他地方都支持IE，只有部分支持和歌剧。

Answer 3

你应该把立场定为绝对的，试试这些.

​

.fit{
  width:100%;
  height:100%;
  position:absolute;
  background-color:red;
  }

<div class="fit"></div>

​