如何按比例调整div的高度，直到达到一定的窗口宽度？

Question

I am looking at using Flexslider on my website and have seen an implementation on another site that I think is incredibly interesting. It resizes the divs in proportion with the images as background images (set via inline CSS styles) and a caption and link to a relevant post inside the container div. Something like:

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

NOTE: Not the exact code.

Each <li> is a maximum of 600px high, set via a max-height CSS attribute. The width of each <li> is 100%, and when the window is resized the slide remains in proportion. However, by the time the container reaches a width of something like 1100px, it reaches the maximum 600px height, and then as the width keeps expanding to fill the window, the container height remains at 600px. Once the width goes below 1100px, the height changes in proportion as before.

I know how to get the slides to change in proportion (using padding-bottom, however), but I can't seem to find a way to put this cap on the height in place (obviously because I'm using padding and not dimensions). Could anyone advise? Is this only possible in JavaScript or can this be done in pure CSS too?

Answer 1

You could do this using CSS with multiple media queries. Access the screen width with something like this:

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

having lots of queries could slow down load time. You'd have to play around with the values and number of queries to get it how you want it.

Answer 2

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