Slippry.js滑块无法正确缩放图像

Question

在响应式网站上使用slippry.js滑块。图像原始大小为600x600px。当调整高度低于400px时，在图像下方的滑块内显示空白区域。

尝试用背景图像替换滑块图像并使背景大小覆盖，但在重新缩放到移动设备时使图像变大。尝试改变.sy-filler类的高度。试图在slippry.js中停用adaptiveHeight。

在Firefox中查看图像信息显示名为viewport的元标记，其内容为width = device-width;高度=设备宽度。

无法找到联系slippry.js开发人员的地方，所以认为堆栈溢出的人可能有一个想法。下面是滑块的结构：

    <div class="main-slider">
    <div class="sy-box">
    <div class="sy-slides-wrap">
    <div class="sy-slides-crop">
    <ul class="slippry sy-list" style="left: -100%; transition-duration: 800ms;">
    <li class="sy-slide horizontal useCSS" style="left: 0px;">
    <div class="container">
    <div class="slide-title">
    </div>
    <img class="visible-md visible-lg" src="img/slides/home-top-slide1.jpg">
    <img class="visible-xs visible-sm" src="img/slides/home-top-slide1-m.jpg">
    </li>
    <li class="sy-slide horizontal useCSS sy-active" style="left: 100%;">
    <div class="container">
    <div class="slide-title">
    </div>
    <img class="visible-md visible-lg" src="img/slides/home-top-slide2.jpg">
    <img class="visible-xs visible-sm" src="img/slides/home-top-slide2-m.jpg">
    </li>
    <li class="sy-slide horizontal useCSS" style="left: 200%;">
    <div class="container">
    <div class="slide-title">
    </div>
    <img class="visible-md visible-lg" src="img/slides/home-top-slide3.jpg">
    <img class="visible-xs visible-sm" src="img/slides/home-top-slide3-m.jpg">
    </li>
    </ul>
    </div>
    <ul class="sy-controls">
    <li class="sy-prev">
    <a href="#prev">Previous</a>
    </li>
    <li class="sy-next">
    <a href="#next">Next</a>
    </li>
    </ul>
    <div class="sy-caption-wrap">
    <div class="sy-caption" style="display: none;"></div>
    </div>
    <div class="sy-filler ready" style="padding-top: 101.781%;"></div>
    </div>
    <ul class="sy-pager">
    <li class="">
    <a href="#1">1</a>
    </li>
    <li class="sy-active">
    <a href="#2">2</a>
    </li>
    <li class="">
    <a href="#3">3</a>
    </li>
    </ul>
    </div>
    </div>

CSS

    .main-slider {
        position: relative;
        width: 100%;
    }

    .sy-box {
        min-height: 400px;
    }

    .sy-slides-wrap {
        height: 100%;
        position: relative;
        width: 100%;
    }

    .sy-slides-crop {
        height: 100%;
        overflow: hidden;
        width: 100%;
    }

    .sy-slides-crop {
        height: 100%;
        overflow: hidden;
        width: 100%;
    }

    .sy-slides-crop {
        min-height: 400px;
    }

    .sy-list {
        height: 100%;
        margin: 0;
        padding: 0;
        width: 100%;
    }


    .sy-controls, .sy-controls li, .sy-list, .sy-slide, .sy-slides-crop {
        position: absolute;
    }

    .sy-controls, .sy-list, .sy-pager {
        list-style: outside none none;
    }

    .slippry li {
        margin: 0;
        padding: 0;
    }

    .sy-slide {
        width: 100%;
        z-index: 2;
    }

    .slide-title {
        position: absolute;
        top: 30px;
        width: 300px;
    }

    .sy-controls, .sy-slide > a, .sy-slide > a > img, .sy-slide > img {
        margin: 0;
        padding: 0
        width: 100%;
    }

    .sy-slide > a > img, .sy-slide > img {
        border: 0 none;
        display: block;
    }

    .visible-xs {
        display: block !important;
    }

    .sy-controls {
        display: none;
        height: 100%;
    }

    .sy-controls li.sy-prev {
        left: 0;
        top: 0;
    }

    .sy-controls li {
        height: 100%;
        min-width: 4.2em;
        width: 10%;
        z-index: 33;
    }

    .sy-controls li.sy-next {
        right: 0;
        top: 0;
    }
    .sy-caption-wrap {
        bottom: 2em;
        left: 50%;
        position: absolute;
        z-index: 12;
    }

    .sy-filler.ready {
        transition: padding 0.6s ease 0s;
    }

    .sy-filler {
        width: 100%;
    }

    .sy-pager {
      display: none !important;
      margin: 1em 0 0;
      overflow: hidden;
      padding: 0;
      text-align: center;
    }

    .sy-pager {
      display: block;
      margin: 1em 0 0;
      overflow: hidden;
      padding: 0;
      text-align: center;
    }

Slippry JS设置：http://www.slippry.com/settings/