我如何按比例调整div高度直到达到某个窗口宽度？
我正在使用我的网站上的Flexslider，并在另一个网站上看到了我认为非常有趣的实现。 它调整div的大小与图像的比例，作为背景图像（通过内联CSS样式设置）和标题并链接到容器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>最大高度为600px，通过max-height CSS属性设置。 每个<li>的宽度都是100％，并且在窗口大小调整后，幻灯片保持成比例。 然而，当容器达到1100px的宽度时，它达到最大600px的高度，然后随着宽度不断扩大以填充窗口，容器高度保持在600px。 一旦宽度低于1100px，高度将按照以前的比例变化。
我知道如何让幻灯片按比例改变（然而，使用填充底部），但我似乎无法找到一种方法将这个帽子放置在适当位置（显然是因为我使用的是填充而不是尺寸）。 任何人都可以建议吗？ 这是唯一可能的JavaScript或可以这样做纯粹的CSS呢？
你可以用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
}
有很多查询可能会减慢加载时间。 您必须充分利用查询的数量和数量来获得您想要的数据和数量。
例如，使用wv（视口宽度）作为高度： height: 60vw
上一篇: How do I proportionally resize div height until I get to a certain window width?