如何按比例调整 div 高度，直到达到某个窗口宽度？答案

【问题标题】：How do I proportionally resize div height until I get to a certain window width?如何按比例调整 div 高度，直到达到某个窗口宽度？
【发布时间】：2017-08-30 07:11:23
【问题描述】：

我正在考虑在我的网站上使用 Flexslider，并在另一个网站上看到了我认为非常有趣的实现。它根据图像作为背景图像（通过内联 CSS 样式设置）和标题并链接到容器 div 内的相关帖子，按比例调整 div 的大小。比如：

<ul class="flexslider">
  <li class="slide" style="background-image: url(MY_IMAGE);">
    <h1>Post heading</h1>
    <p>Post extract</p>
    <a href="#">Link</a>
  </li>
  <li class="slide" style="background-image: url(MY_IMAGE);">
    <h1>Post heading</h1>
    <p>Post extract</p>
    <a href="#">Link</a>
  </li>
  <li class="slide" style="background-image: url(MY_IMAGE);">
    <h1>Post heading</h1>
    <p>Post extract</p>
    <a href="#">Link</a>
  </li>
  <li class="slide" style="background-image: url(MY_IMAGE);">
    <h1>Post heading</h1>
    <p>Post extract</p>
    <a href="#">Link</a>
  </li>
  <li class="slide" style="background-image: url(MY_IMAGE);">
    <h1>Post heading</h1>
    <p>Post extract</p>
    <a href="#">Link</a>
  </li>
</ul>

注意：不是确切的代码。

每个<li> 的最大高度为 600 像素，通过 max-height CSS 属性设置。每个<li> 的宽度为 100%，当调整窗口大小时，幻灯片保持成比例。然而，当容器的宽度达到 1100px 时，它达到最大 600px 高度，然后随着宽度不断扩大以填满窗口，容器高度保持强> 在 600 像素。一旦宽度低于 1100 像素，高度就会像以前一样按比例变化。

我知道如何让幻灯片按比例变化（但是使用 padding-bottom），但我似乎找不到将这个上限放在适当高度的方法（显然是因为我使用的是 padding而不是尺寸）。有人可以建议吗？这是否只能在 JavaScript 中实现，或者也可以在纯 CSS 中实现？

【问题讨论】：

标签： javascript jquery css flexslider

【解决方案1】：

您可以使用带有多个媒体查询的 CSS 来做到这一点。像这样访问屏幕宽度：

@media only screen and (max-width:500px){
    //large amount of padding
}
@media only screen and (max-width:400px){
    //medium amount of padding
}
@media only screen and (max-width:300px){
    //small amount of padding
}

有大量查询可能会减慢加载时间。您必须使用查询的值和数量来获得所需的结果。

【讨论】：

【解决方案2】：

使用 wv（视口宽度）作为您的身高： height: 60vw - 例如

【讨论】：