Можно ли адаптировать слайдер

Здравствуйте. Скачала симпатичный слайдер hw-slider: http://heavenweb.ru/demo/hwslider/index.html (код весь прописан в одной странице). Растянула во всю ширину, прописав в стилях width:100% вместо пикселей, и получилось почти то, что мне нужно. Стили и скрипты перенесла в отдельные файлы и подключила в html <meta name="viewport" content="width=device-width, initial-scale=1.0">, чтобы можно было менять слайдер в зависимости от мобильного устройства. Меня не устраивает отображение на маленьких экранах шириной до 420px, слишком большая высота и часть изображения "съедается". Пробовала вместо ширины задавать высоту в %, но тогда изображения вообще исчезли. Комбинации max-height и min-height, что в пикселях, что в % тоже ничего не дали. Код css, где я меняла параметры:

#slider-wrap {
   width:100%;
}
#slider {
   width:100%;
   height:360px;
   overflow: hidden;
   position:relative;
   border:#eee solid 10px;
}
@media (max-width:900px){
   #slider-wrap{
      width:97%;    
   }
}
@media (max-width:420px){
   #slider-wrap{
      width:96%;
   }
}

Вопрос, можно ли этот слайдер сделать так, чтобы он показывал картинку целиком, вне зависимости от ширины экрана, и в чём моя ошибка? Заранее благодарю за конструктивную критику.