Question

我正在使用自适应网站，我希望主页不需要任何滚动。现在，它有一个标题（239像素高）和一个页脚（94像素高），然后猫头鹰旋转木马滑过页面中间的图像。 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>

这是猫头鹰旋转木马的基本结构。并且＆lt;'header'＆gt; 239px高和＆lt;'footer'＆gt;高94像素。图像缩放以适合.sy-box的宽度，max-height：none;

这是一个非常类似于我正在使用的例子。标题，页脚，猫头鹰旋转木马在中间。如何使用此页面使其适合屏幕（没有裁剪图像，只需将它们缩放以使它们适合页面）？ http://www.isidrophotographer.com

Answer 1

最简单的方法是在CSS中使用vh和vw单位。支持到处除了IE当然只是部分支持和歌剧。

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%"
    });

});

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

4 个答案: