jQuery Fade Slider - remove defined height?

See more:

Javascript

CSS

jQuery

I am implementing a jQuery Fade Slider on a site that I am building, although having a defined height is giving me some issues.

I am using columns defined in percentages for their respective width, col-25 = 25% of the width. My images are placed within a class called .img-holder where the width is set to 100%. As of right now, when using the fade slider, the image height is fine at width and height on my screen but when scaling down into smaller screens the defined height obviously becomes problematic. I didn't want to use a different defined height for each screen variation through @media in my css because I am already doing so with my .col class. Is there a way to use the slider without having to define a height for it?

My CSS currently looks like this:

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

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

Any help would be appreciated.
Thanks in advance!