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

Question

我正在使用响应式网站，我希望主页不需要任何滚动。现在，它有一个页眉（239 像素高）和一个页脚（94 像素高），然后 Owl Carousel 在页面中间的图像中滑动。 Owl Carousel 上的 CSS 为 100% 宽度，显示整个图像。但是滑块的设置方式，如果我将容器高度更改为 window.innerHeight，它会在滑块中裁剪图像（仍然是 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>

这是猫头鹰旋转木马的基本结构。并且具有 239px 高的 和 94px 高的 。图像缩放以适应 .sy-box 的宽度和 max-height:none;

这是一个很好的例子，与我正在使用的例子非常相似。页眉，页脚，中间的猫头鹰旋转木马。您将如何获取此页面并使其适合屏幕（无需裁剪图像，只需将它们缩放以适合页面）？ http://www.isidrophotographer.com

Answer 1

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

Answer 2

您应该将位置设为绝对并尝试这些...

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

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

Answer 3

据我了解，您希望您的图片和 div 能够响应屏幕尺寸。这是我根据您所说的解决方案。希望它足以让你解决你的问题。请务必尝试调整窗口大小以查看图像的反应。

我也强烈建议您查看bootstrap。

jsFiddle

css:

img {
    width: 100%;

}

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

.sy-box {
    background-color: blue;
    height:500px;
    width:80%;

}

.kenburns {
    display: inline-block;
    width: 45%;

}

Answer 4

jsfiddle.net/q6rL4jkk/4 。我认为 JS 工具 imgLiquid 可以做到。固定页眉/页脚，并且图像缩放到尽可能大而不会在中间倾斜并且没有滚动条。现在只需要弄清楚如何将它放在我的网站上。

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

});