php - Flexslider smoothHeight不起作用

当我调整窗口大小时，图像上下都有大量的空白。我试过使用smoothHeight:true，但所有这些操作都是将容器设置为500px。这难道不应该使高度动态变化吗？我知道两张图片在我的滑块中大小不同。但是第一张图片应该没有空白。这是我的代码：

<script type="text/javascript" charset="utf-8">
            $(document).ready(function() {
                $('.flexslider').flexslider({
                    animation: "slide",
                    animationLoop: true,
                    slideshow: true,
                    slideshowSpeed: 4000,
                    animationSpeed: 1000,
                    randomize: false,
                    pauseOnHover: true,
                    pauseOnAction: false,
                    controlNav: false,
                    directionNav: true,
                    smoothHeight: true
                });
            });
        </script>


<?php if( have_rows('slider') ): ?>
                    <div class="flexslider no_border">
                        <ul class="slides">
                            <?php while( have_rows('slider') ): the_row();

                                // vars
                                $image = get_sub_field('image');
                                $content = get_sub_field('content');
                                $link = get_sub_field('link');

                                ?>

                                <li class="slide">

                                    <?php if( $link ): ?>
                                        <a href="<?php echo $link; ?>">
                                    <?php endif; ?>

                                        <img class="slider_images" src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt'] ?>" />

                                    <?php if( $link ): ?>
                                        </a>
                                    <?php endif; ?>

                                    <?php echo $content; ?>
                                </li>
                            <?php endwhile; ?>
                        </ul>
                    </div>
                <?php endif; ?>

最佳答案

您的图像设置为position: absolute，这会将它们从页面流中移除。意思是页面上的其他元素不知道它占用了多少空间。Flexslider根据各个幻灯片的尺寸调整大小，在您的例子中是li.slide。而且由于li.slide中的图像是absolute，因此li.slide的高度将与其中内容（您的图像）的大小不匹配。
试着从图像中删除position: absolute，看看这是否允许缩放。

关于php - Flexslider smoothHeight不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44634131/