Как пропорционально изменить высоту 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> имеет максимальную высоту 600 пикселей и устанавливается с помощью атрибута max-height CSS. Ширина каждого <li> составляет 100%, и при изменении размера окна слайд остается пропорциональным. Однако к тому времени, когда контейнер достигает ширины примерно 1100 пикселей, он достигает максимальной высоты 600 пикселей, а затем, поскольку ширина продолжает увеличиваться, чтобы заполнить окно, высота контейнера остается на 600px. Как только ширина станет меньше 1100 пикселей, высота изменится пропорционально, как и раньше.

Я знаю, как заставить слайды изменяться пропорционально (однако, используя padding-bottom), но я не могу найти способ поставить этот колпачок на место по высоте (очевидно, потому что я использую отступы, а не размеры ). Может ли кто-нибудь посоветовать? Это возможно только в JavaScript или это можно сделать и в чистом CSS?


javascript jquery css flexslider
person Nate    schedule 29.08.2017    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вы можете сделать это, используя 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
}

наличие большого количества запросов может замедлить время загрузки. Вам придется поиграть со значениями и количеством запросов, чтобы получить то, что вы хотите.

person Mr.Brompton    schedule 29.08.2017

arrow_upward
0
arrow_downward

Используйте wv (ширина области просмотра) для вашего роста: height: 60vw - например

person Jack Hudzenko    schedule 29.08.2017