如何使此横幅滑块适合浏览器高度？

Question

我用谷歌搜索了2天，试图了解自动高度如何适应，我想我理解如何使背景适合浏览器，但使用this横幅滑块，我没有线索。

有人可以请教我在哪里寻找/开始吗？应该是CSS还是JS？

我对HTML5/CSS3很新，Wordpress为我提供了一个非常简单的环境来启动网站，但我几乎不知道如何修改除插件之外的网站。

如果滑块部分适合下面的这个，那将是非常酷的

提前致谢！

Answer 1

这应该将您在主页上的图像/相册设置为浏览器的高度和宽度，调整一些CSS，它应该与Sidebar完美匹配。

  img {
        max-width: 100%;
        height: auto;
        width: auto\9;
    }

Answer 2

如果您正在寻找适合浏览器高度的图像而不管任何显示器，那么您可以使用this css units页面上的“vh”单元。

vh表示视口高度[viewport =浏览器窗口大小。]，1vh =视口高度的1％，因此在您的情况下，您可以像这样使用100vh图像：

img{
  height: 100vh;
}

检查此jsfiddle是否相同。

请记住，您需要高分辨率图像，并且这些图像在移动设备上看起来不太好。