Jquery宽度和高度计算会混淆我的响应式CSS

Question

我的网页上有一个Jquery滑块。现在滑块中的图像是1024x500px。现在我用@media查询指定，每当视口大小低于宽度1024px时，图像（以及整个滑块元素）应该调整大小，使用如下指定的窗口大小:(注意sliderContainer只是一个示例名称）

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

现在调整图像的大小很有效，但只有当jquery滑块源文件不包含在内时，所以在jquery文件的某个地方有宽度和高度计算器会混淆调整大小，我相信这是这一部分：

_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
                });

            });

        },

Jquery文件：http://lamininbeauty.co.za/js/jquery.eislideshow.js

现在，这是我的网页示例，您可以看到它的作用。调整1024px以下的窗口大小以查看我的意思：My Page 注意：每当我删除jquery部分时，图像的大小调整在1024px以下工作正常，并且图像会随浏览器窗口调整大小。

现在这里是功能基本标记：

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

    }
}

我该如何解决这个问题？

谢谢你！