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

Change width so height fits in window screen?

本文关键字：窗口 屏幕 高度      更新时间：2023-10-16

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

这是猫头鹰旋转木马的基本结构。并且具有<'239像素高且<'的页眉'>94像素高的页脚。图像的比例适合.sy框的宽度，最大高度：none；

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

实现这一点的最简单方法实际上是在CSS中使用vh和vw单元。所有地方都支持，当然IE只是部分支持和opera。

您应该将位置设置为绝对位置，并尝试以下操作。。。

.fit{
  width:100%;
  height:100%;
  position:absolute;
  background-color:red;
  }
<div class="fit"></div>

据我所知，您希望您的图像和div能够响应屏幕大小。这是我基于你所说的解决方案。希望这足以让你解决你的问题。请确保尝试调整窗口大小以查看图像的反应。

我还强烈建议您查看引导程序。

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

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

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