Question

当我调整窗口大小时，我的图像上方和下方都有大量的空白区域。我尝试过使用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; ?>

Answer 1

您的图片设置为position: absolute，会将其从页面流中删除。意味着页面上的其他元素不知道它占用了多少空间。 Flexslider根据单个幻灯片的尺寸调整大小，在您的情况下为li.slide。由于li.slide中的图片为absolute，li.slide的高度与其内部内容（图片）的大小不匹配。

尝试从图片中删除position: absolute，看看是否允许它缩放。

Flexslider smoothHeight无法正常工作

1 个答案: