jquery - Jquery の幅と高さの計算がレスポンシブ CSS を台無しにする

Question

Web ページに Jquery スライダーがあります。スライダーの画像は 1024x500px になりました。ビューポートのサイズが幅 1024px を下回るたびに、画像 (およびそのためのスライダー要素全体) が次のように指定されたウィンドウ サイズでサイズ変更されるように @media クエリで指定しました。

.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 未満に変更して、意味を確認してください:マイ ページ 注: 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 */

    }
}

どうすればこれを修正できますか?

ありがとう！