Как сделать Nivo Slider 100% высотой браузера?

Я работаю над веб-сайтом, используя Nivo Slider: Демонстрация веб-сайта

Проблема в том, что раздел ползунка не будет на 100% соответствовать высоте браузера. Как я могу это сделать?

Я проверял и нашел этот код css:

.nivoSlider {
  position:relative;
  width:100%;
  height:auto;
  overflow: hidden;
  left:0;
  margin-top:100px;
}

Согласно моим знаниям CSS, мы можем изменить height:auto; на height:100%, чтобы сделать ползунок высотой 100%. Увы, не работает!

Что мне здесь не хватает?

ОБНОВЛЕНИЕ

Я обнаружил, что изображение ползунков принимает размер, о котором написано здесь:

.nivoSlider img {
  position: absolute;
  top: 0px;
  left: 0px;
  max-width: none;
  max-height: 100%; // I ADDED THIS TO MAKE 100% HEIGHT AND IT WORKS!!!
}

тем не менее, изображение теперь растягивается, как сделать так, чтобы изображение не растягивалось, а обрезалось?


css nivo-slider
person Ace Supriatna    schedule 07.08.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Посмотрите на следующий класс. Вы назначили 900px высоту.

.nivoSlider:after {
content: '';
background: transparent url(../../images/parallax_slider/pattern.png) repeat top left;
position: absolute;
height: 900px;
left: 0;
top: 0;
width: 100%;
z-index: 5;
}
person Suresh Ponnukalai    schedule 07.08.2014
comment
Забыл упомянуть об этом, но я пытался, и это не сработало. Однако я нашел кое-что, что устанавливает img внутри ползунка на максимальную высоту: 100%; это работает, но изображение теперь растянуто. Я ищу решение для него. - person Ace Supriatna; 07.08.2014