jQuery Fade Slider - удалить определенную высоту?

Я реализую слайдер jQuery Fade Slider на сайте, который я создаю, хотя наличие определенной высоты вызывает у меня некоторые проблемы.

Я использую столбцы, определенные в процентах для их соответствующей ширины, col-25 = 25% ширины. Мои изображения помещены в класс с именем .img-holder, где ширина установлена ​​на 100%. На данный момент при использовании ползунка затухания высота изображения в порядке по ширине и высоте на моем экране, но при уменьшении масштаба до меньших экранов определенная высота, очевидно, становится проблематичной, поскольку у меня есть навигация со стрелкой влево / вправо по моим изображениям и тексту абзаца. ниже. Я не хотел использовать другую определенную высоту для каждого варианта экрана с помощью запросов @media в моем css. Есть ли способ использовать ползунок, не определяя для него высоту?

Мой CSS в настоящее время выглядит так:

.img-holder { background: #EEE; overflow:auto; position:relative; width:100%}
.col { float:left }
.col .img-holder { width:100%; height:auto; margin-bottom:14px; margin-top:5px }

.fades-demo { position:relative; width:100%; height: 100% !important; margin-left:auto; margin-right:auto; -webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; }

Моя разметка:

<div class="col col-50">
<div class="img-holder">
    <div class="mgtb fades-demo hide" id="fades1">

        <div>
        <img src="/001.jpg" width="" height="" alt="" class="" />
        </div>

        <div>
        <img src="/002.jpg" width="" height="" alt="" class="" />
        </div>

        <div>
        <img src="/003.jpg" width="" height="" alt="" class="" />
        </div>

    </div>

</div>
</div>

JS

<script>
//scripts
$(document).ready(function() {


//initUI
initUI()

//init slider 1
var defaults = {
    speed: 800
    ,timer: 4000
    ,autoSlider: false
    ,hasNav: true
    ,pauseOnHover: true
    ,navLeftTxt: ''
    ,navRightTxt: ''
    ,zIndex:20
}
,as = $('#fades1').fadeSlider(defaults)
,count = 2

//destroy
$('#o-btn-des').click(function() {
    as.destroy()
})

//resize wrapper
$('#o-btn-cs').click(function() {
    $('#fades1').css({
        position:'fixed'
        ,left:0
        ,top:0
        ,width:'100%'
        ,height:'100%'
        ,'z-index': 300
    })
    as.defs.speed = 1000
})

//resize wrapper
$('#o-btn-ns').click(function() {
    var t = '<div class="fades-demo mgtb" id="fades' + ++count +'">' +
    ($('#fades1 .fade-slides').length?$('#fades1 .fade-slides').html():$('#fades1').html()) +
    '</div>'
    $('#wrapper').append(t)
    $('#fades' + count).fadeSlider(defaults)
})
})

</script>