在响应式滑块中设置高度（jQuery 循环）答案

【问题标题】：Setting height in a responsive slider (jQuery Cycle)在响应式滑块中设置高度（jQuery 循环）
【发布时间】：2012-02-27 04:21:12
【问题描述】：

我在几张幻灯片上使用了 jQuery Cycle，下面有内容。 jQuery Cycle 将父级设置为相对，子级幻灯片设置为绝对，因此应该覆盖它下面的内容。通常，我会给父容器一个高度来解决我的问题。

由于布局是响应式的，因此高度可以改变。有没有一个简单的解决方案？

编辑：

这就是最终为我做的事情：

$(window).load(function(){

    var rotate_height = $('#rotate div img').height();
    $('#rotate').css('height', rotate_height);

    $(window).resize(function() {
        if($(window).width() >= 960){
            rotate_height = 290;
            $('#rotate').css('height', rotate_height);
            $('#rotate').cycle('next');
        } else if ($(window).width() >= 768 && $(window).width() <= 959) {
            rotate_height = 230;
            $('#rotate').css('height', rotate_height);
            $('#rotate').cycle('next');
        } else if ($(window).width() >= 480 && $(window).width() <= 767) {
            rotate_height = 210;
            $('#rotate').css('height', rotate_height);
            $('#rotate').cycle('next');
        } else if ($(window).width() <= 479) {
            rotate_height = 150;
            $('#rotate').css('height', rotate_height);
            $('#rotate').cycle('next');
        }
    });

    $('#rotate').cycle({
        fx: 'fade',
        fit: 1,
        containerResize: 0,
        slideResize: 0,
        height: rotate_height       
    });
});

cycle('next') 在访问者调整其显示器大小后强制幻灯片到下一张。不理想，但图像不会按比例放大，只有在幻灯片更改后。

【问题讨论】：

一些示例代码会有所帮助。
很高兴概念上的“轻推”足以引导您找到解决方案！

标签： javascript jquery html css cycle

【解决方案1】：

这是我的解决方案：

$(window).resize(function(){
    $('.cycle-container').each(function(){      
        $(this).height($(this).find('> *:first').outerHeight());
    })
});

【讨论】：

【解决方案2】：

您可以使用ready 和resize 事件来触发一个函数，该函数将根据window 的width 适当地设置height。当页面“响应”当前窗口宽度时，您的 jQuery 方法将适当调整幻灯片父级的高度。

【讨论】：

【解决方案3】：

我遇到了同样的问题，是这样解决的：

HTML：

<div class="hp_slider">
<a href="#"><img class="slide" alt="" width="940" height="420" src="/assets/images/cache/17dd0cc96316523cbba09777c8e512769078b0bc.png" /></a>
<a href="#"><img class="slide" alt="" width="940" height="420" src="/assets/images/cache/39fbcef502bd01b7f13980a81b73f6e6cb5491b6.jpg" /></a>
</div>

CSS：

.hp_slider {margin-bottom:49%; width:100%; height:auto;}
.hp_slider img {width:100%; height:auto;}

jQuery:

$(document).ready(function() {
$('.hp_slider').cycle({
fx: 'fade',
containerResize: false,
slideResize: false,
fit: 1
});
});

它有点脏，但作为百分比的底部边距将文本从滑块后面向下推，并以不同的大小将其保持在适当的位置，因此它仍然具有响应性。

【讨论】：

【解决方案4】：

我认为你可以这样做：

$slideshow.cycle({ 
  containerResize: false,
  slideResize: false,
  fit: 1
});

基本上，当窗口调整大小时，幻灯片容器会被强制调整大小。（不确定是否应该将所有设置为true或false，请尝试一下。）

【讨论】：

我已经在我的类似项目中有此代码，但仍然无法正常工作。