Jquery的宽度和高度计算把我的响应CSS搞砸了

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

现在图像的大小调整效果很好，但只有在不包括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文件：

现在，这里是我的网页的一个示例，您可以看到它的功能。将窗口调整到1024px以下以了解我的意思： 注意：每当我删除jquery部分时，图像的大小调整在1024px以下都可以正常工作，并且图像会随着浏览器窗口的变化而调整大小

下面是功能性基本标记：

HTML:

我怎样才能解决这个问题

---

谢谢大家!

哦，是的，这是图像的url：我试图制作一个提琴，但由于某种原因，提琴停止了预加载图像（如jquery文件中定义的那样）setImageSize从何而来？它不是jquery的一部分，也不在slideshow.js中。如果你不想要它，那么就不要调用它。它在文件中，向下滚动到文件的中间……在：//resize the imagestried处删除调用怎么样？这样会破坏代码/滑块。。。

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

            });

        },

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

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

    }
}