如何使用CSS设置JQuery FlexSlider的高度？

我不太喜欢CSS，我有以下网站使用BootStrapCSS框架和FlexSliderJQuery插件来显示上面的幻灯片：

我对如何降低幻灯片放映高度有以下疑问：如果使用FireBug，我会降低.flex视口高度的最大高度值，这一个：

.flex-viewport {
    max-height: 2000px;
    transition: all 1s ease 0s;
}

我得到显示的IMAGES区域的高度降低到新值（例如200 px）ok，但现在我有一个问题，我的IMAGES上写的文本（由.flex caption text段落内的跨距表示）处于错误位置：

            <div id="main-slider" class="flexslider">
                <ul class="slides">
                    <li>
                        <img src="http://localhost/wordpress/wp-content/themes/AsperTheme/assets/img/flexslider/flex-1.jpg"/>
                        <div class="flex-caption">
                            <p class="flex-caption-text">
                                <span>Lorem ipsum</span>
                                <br>
                                <span>sit dolor</span>
                                <br>
                                <span>adipiscing elitur</span>
                            </p>
                        </div>
                    </li>

正如我所说，幻灯片的高度会降低

2） 我突出显示了一张幻灯片的内容，将鼠标光标放在这一html行上：

<ul class="slides" style="width: 1000%; margin-left: -1288px;">

在本例中，FireBug以蓝色向我显示该区域的高度，在我看来，该区域的高度与旧容器（2000px）相同，为什么

Tnx

---

Andrea将.flex视口的值更改为最大高度：200px

更改flexslider.css文件中flexslider.slides img的高度值 例如：

它不会影响你写在我的图片上的文字

<ul class="slides" style="width: 1000%; margin-left: -1288px;">

 .flexslider .slides img {
width: 100%; 
height:200px;
display: block; }