css - FlexSlider 上的 100% 高度幻灯片

Question

我正在尝试使用 FlexSlider 创建响应式 slider 。我的目标是让所有幻灯片的最大高度等于 .flexslider 100% 高度。

以下片段显示了我的问题:我希望所有幻灯片(红色和绿色)都具有最大高度，覆盖容器高度(独立于它们的内容)。我尝试设置 height:100%; 但它不起作用。我能做什么？

FIDDLE

Answer 1

请在下方申请JS代码

 function setEqualHeight(selector) {
        var heights = new Array();

        $(selector).each(function() {

            $(this).css('min-height', '0');
            $(this).css('max-height', 'none');
            $(this).css('height', 'auto');

            heights.push($(this).height());
        });

        var max = Math.max.apply( Math, heights );
    $(selector).each(function() {
            $(this).css('height', max + 'px');
        }); 
    }


        setEqualHeight('.slides li');

        $(window).resize(function() {

            setTimeout(function() {
                setEqualHeight('.slides li');
            }, 120);
        });

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

参见 Updated Demo for Window Resize