javascript - 更改宽度以使高度适合窗口屏幕？

Question

我正在使用一个响应式网站，我希望主页不需要任何滚动。现在，它有一个页眉(239 像素高)和一个页脚(94 像素高)，然后猫头鹰轮播在页面中间滑动图像。 Owl Carousel 上的 CSS 宽度为 100%，显示了整个图像。但是 slider 的设置方式，如果我将容器高度更改为 window.innerHeight，它会裁剪 slider 中的图像(仍然是 100% 宽度)。

如何让 Owl Carousel 成为一个相对高度，将宽度更改为精确的 % 宽度，以便 Header + Owl Carousel + Footer 都适合用户浏览器窗口而无需滚动？

编辑:

<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>

这是猫头鹰轮播的基本结构。并具有 239 像素高的 <'header'> 和 94px 高的 <'footer'>。图像缩放以适应 .sy-box 的宽度和 max-height:none；

这是一个很棒的示例，与我正在使用的示例非常相似。页眉，页脚，中间的猫头鹰旋转木马。您将如何处理此页面并使其适合屏幕(不裁剪图像，只是让它们缩放以适合页面)？ http://www.isidrophotographer.com

Answer 1

最简单的方法实际上是在您的 CSS 中使用 vh 和 vw 单位。到处都支持，当然除了 IE 只是部分支持和 Opera。