Question

我正在寻找在我的网站上使用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，高度就会像以前一样按比例变化。

我知道如何让幻灯片按比例改变（但是使用填充底部），但我似乎无法找到一种方法将这个帽子放在适当位置（显然是因为我＆＃39 ; m使用填充而不是尺寸）。有人可以建议吗？这只能在JavaScript中使用，还是可以在纯CSS中完成？

Answer 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
}

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

Answer 2

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

在达到某个窗口宽度之前，如何按比例调整div高度？

2 个答案: