Jquery width and height calculation messes up my responsive CSS
===

I have a Jquery slider on my webpage. Now the images in the slider are 1024x500px. Now I specified with @media queries that whenever the viewport size goes belowe width 1024px, the images (and whole slider element for that matter) should resize with the windows size specified like this: (note sliderContainer just an example name)

    .sliderContainer{
        max-width: 100%;
        height: auto;
        width: auto; /* for ie9 */ 
    }

Now the resizing of the images works great, but only when the jquery slider source file is not included, so somewhere in the jquery file there are width and heigth calculaters that messes the resizing up, and I believe it is this part:

    _setImagesSize		: function() {
    			
    			// save ei-slider's width
    			this.elWidth	= this.$el.width();
    			
    			var _self	= this;
    			
    			this.$images.each( function( i ) {
    				
    				var $img	= $(this);
    					imgDim	= _self._getImageDim( $img.attr('src') );
    					
    				$img.css({
    					width		: imgDim.width,
    					height		: imgDim.height,
    					marginLeft	: imgDim.left,
    					marginTop	: imgDim.top
    				});
    				
    			});
    		
    		},

The Jquery file: [http://lamininbeauty.co.za/js/jquery.eislideshow.js][1]

Now here is a sample of my web page so you can see what it does. Resize the window below 1024px to see what I mean: [My Page][2]
NOTE: Whenever I remove the jquery part, the resizing of the images works fine below 1024px, and the images resizes with the browser window.

Now here is the functional basic markup:

HTML:

    <div id="ei-slider" class="ei-slider">
    				<ul class="ei-slider-large">
    				<li>
    					<img src="images/large/sunbed.jpg" alt="Vertical Sunbed TanCan"/>
    					<div class="ei-title">					
    						<h2>Vertical Sunbed</h2>
    						<h3>(TanCan)</h3>             
    					</div>
    				</li>
    				<li>
    					<img src="images/large/makeup.jpg" alt="Vertical Sunbed TanCan"/>
    					<div class="ei-title">					
    						<h2>Vertical Sunbed</h2>
    						<h3>(TanCan)</h3>             
    					</div>
    				</li>
    				<li>
    					<img src="images/large/sunbed.jpg" alt="Vertical Sunbed TanCan"/>
    					<div class="ei-title">					
    						<h2>Vertical Sunbed</h2>
    						<h3>(TanCan)</h3>             
    					</div>
    				</li>
    				<li>
    					<img src="images/large/makeup.jpg" alt="Vertical Sunbed TanCan"/>
    					<div class="ei-title">					
    						<h2>Vertical Sunbed</h2>
    						<h3>(TanCan)</h3>             
    					</div>
    				</li>
    				<li>
    					<img src="images/large/sunbed.jpg" alt="Vertical Sunbed TanCan"/>
    					<div class="ei-title">					
    						<h2>Vertical Sunbed</h2>
    						<h3>(TanCan)</h3>             
    					</div>
    				</li>
    				<li>
    					<img src="images/large/makeup.jpg" alt="Vertical Sunbed TanCan"/>
    					<div class="ei-title">					
    						<h2>Vertical Sunbed</h2>
    						<h3>(TanCan)</h3>             
    					</div>
    				</li>
    				<li>
    					<img src="images/large/makeup.jpg" alt="Vertical Sunbed TanCan"/>
    					<div class="ei-title">					
    						<h2>Vertical Sunbed</h2>
    						<h3>(TanCan)</h3>             
    					</div>
    				</li>
    				</ul>
    </div>

CSS:

    .ei-slider{
    	position: relative;
    	width: 1024px;
    	height: 500px;
    	margin: 0 auto;
    }
    .ei-slider-large{
    	height: 100%;
    	width: 100%;
    	position:relative;
    	overflow: hidden;
    }
    .ei-slider-large li{
    	position: absolute;
    	top: 0px;
    	left: 0px;
    	overflow: hidden;
    	height: 100%;
    	width: 100%;
    }
    .ei-slider-large li img{
    	width: 100%;
    }
    
    /*The part that governs the resizing below 1024px*/

    @media screen and (max-width: 1023px){           
    	.ei-slider{
    		position: relative;
    		max-width: 100%;
    		height: auto;
    		width: auto; /* for ie9 */
    	}   
    	.ei-slider-large{
    		position: relative;
    		max-width: 100%;
    		height: auto;
    		width: auto; /* for ie9 */
    	}
    	.ei-slider-large li{
    		position: static;
    		top: 0px;
    		left: 0px;
    		overflow: hidden;
    		height: 100%;
    		width: 100%;
    }
        .ei-slider-large li img{
            max-width: 100%;
            height: auto;
            width: auto; /* for ie9 */
       
        }
    }

How can I fix this?
 
Thank YOU!


  [1]: http://lamininbeauty.co.za/js/jquery.eislideshow.js
  [2]: http://lamininbeauty.co.za/index4.html