css - このズーム効果スライダーを適応させてレスポンシブにします

Question

レスポンシブズームスライダーを作成しようとしています。zoomslider をベース モデルとして使用し、レスポンシブ グリッドをベースとして使用してレスポンシブになるようにコードを調整しました。

今画像で悩んでいます。

私の問題です。画像サイズを定義すると、応答し始めるとズーム効果がなくなります。

私のhtmlとcssを見ることができれば、私が何を求めているかを理解するのに役立ちます.

HTML

<div id="zoom-slider">
                                        <img src="img/js-slideshow-0.jpg" />
                                        <img src="img/js-slideshow-1.jpg"/>
                                            <img src="img/js-slideshow-2.jpg"/>
                                        <img src="img/js-slideshow-3.jpg"/>
                                    </div>

これは私のCSSです

/* http://www.menucool.com */

#zoom-slider {
    width:100%;height:400px;/* Make it smaller than your images for zooming effect */
    max-width:940px;
    border:10px solid #363f49;
    overflow:hidden;
    position:relative;
    margin:0 auto;/*make the image slider center-aligned */
    border-radius:3px;
}

#zoom-slider img {
    position:absolute;
    display:none;
    top:0px;
    z-index:1;
    -ms-interpolation-mode: bicubic;
    image-rendering: optimizeQuality;
}

/* navigation bullets wrapper */
div.navBulletsWrapper  {
    top:-40px;
    left:43%;
    background:none;
    padding-left:20px;
    position:relative;
    z-index:8;
    cursor:pointer;
}

/* each bullet */
div.navBulletsWrapper div 
{
    width:12px; height:12px;
    background:transparent url(../img/bullets.png) no-repeat 0 0;
    float:left;overflow:hidden;vertical-align:middle;cursor:pointer;
    margin-right:11px;/* distance between each bullet*/
    _position:relative;/*IE6 hack*/
}

div.navBulletsWrapper div.active {background-position:0 -12px;}


/* --------- Others ------- */
#zoom-slider img
{
    transform: translate3d(0,0,0);
    -ms-transform:translate3d(0,0,0);
    -moz-transform:translate3d(0,0,0);
    -o-transform:translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
}

@media only screen and (max-width: 768px) {

    #zoom-slider {
        width:100%;height:250px;/* Make it smaller than your images for zooming effect */
        border:6px solid #363f49;
    }

}

@media only screen and (max-width: 480px) {



}