Html Flexslider视口赢得'；t在幻灯片中查看较短图像时调整高度

默认情况下，Flexslider应根据当前显示图像的高度调整其视口高度。在我的网站上，Flexslider固定在幻灯片中最大图像的高度，所有较短的图像下方都留有空白。我是否在做些什么来覆盖Flexslider的响应高度功能？有办法解决这个问题吗

现场选秀：

HTML:

---

在javascript中启动flexslider时，应用以下属性：

smoothHeight:true

例如：

$('.flexslider').flexslider({
    animation: "slide",
    smoothHeight: true
});

添加“smoothHeight:true”成功了，谢谢您，先生！

/*
 * flexslider styling 
 */

.flexslider {
    background:none !important;
    border:none !important;
    box-shadow:none !important;
}

.slides {
    overflow: hidden !important;
}

.slides div .flex-caption {
    overflow: scroll !important;
}

.slides li img {
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;

    /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
    */
    -ms-user-select: none;
    user-select: none;
}

.flex-direction-nav a  {
    color: #999 !important;
}

.flex-next {
    padding-right: 30px !important;
}

.arrows {
    position: absolute;
    z-index: 90;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.arrow-left {
    padding-left: 15px;
    opacity: 0;
    transition: opacity .7s ease-out;
    -moz-transition: opacity .7s ease-out;
    -webkit-transition: opacity .7s ease-out;
    -o-transition: opacity .7s ease-out;
}

.arrow-right {
    padding-right: 20px;
    opacity: 0;
    transition: opacity .7s ease-out;
    -moz-transition: opacity .7s ease-out;
    -webkit-transition: opacity .7s ease-out;
    -o-transition: opacity .7s ease-out;
}

.flexslider:hover .arrow-right, .flexslider:hover .arrow-left {
    opacity: 0.8;
    transition: opacity .7s ease-out;
    -moz-transition: opacity .7s ease-out;
    -webkit-transition: opacity .7s ease-out;
    -o-transition: opacity .7s ease-out;
}

.flexslider:hover .flex-prev, .flexslider:hover .flex-next, .flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {
    opacity: 0 !important; 
    z-index: 100;
}

@media screen and (max-width: 860px) {
  .flex-direction-nav .flex-prev { opacity: 0 !important;}
  .flex-direction-nav .flex-next { opacity: 0 !important;}
  .arrow-right, .arrow-left { opacity: 1}
}

.flex-control-nav {
    text-align: right !important;
    padding-right: 0px !important;
}

.flex-control-paging li {
    margin: 0 0px 0 12px !important;
}

.flex-control-paging li a {
    color: transparent !important;
}

.nodot .flex-control-paging li a { 
    display: none !important;
}

.flex-control-paging li a.flex-active {
    background: #6dab3e !important;
}


/*
 * flexslider caption styling 
 */

.flex-caption {
    position: absolute;
    text-align: left;
    font-size: 11px;
    background:rgba(255, 255, 255, 0.7);
    z-index: 100;
    padding: 20px 10px 35px 30px;
    width: 287px;
    padding-top: 100%;
    bottom: 0px;
    display: none;
    color: #000;
}

.caption-expand {
    padding-right: 0px !important;
    padding-left: 20px !important;
}

.right {
    right: 0;
    margin-bottom: 0px;
}

.show-caption {
    position: absolute;
    top: 48%;
    right: 240px;
    z-index: 99;
    opacity: 0.75;
    filter: alpha(opacity=75); /* For IE8 and earlier */
    pointer-events: none;
    display: none;
}

.hcaption {
    font-size: 13px;
    text-transform: uppercase;
}

.hcap {
    margin-top: -7px;
}

.flex-caption p {
    margin-bottom: -8px;
}

$('.flexslider').flexslider({
    animation: "slide",
    smoothHeight: true
});