使用jQuery调整父元素的高度以匹配其可见子元素的高度
我有一个幻灯片在容器中运行，需要容器的高度来匹配可见幻灯片的高度。 不幸的是，图像绝对定位，我无能为力。 为了解决这个问题，我正在使用一些jQuery魔法来处理相同的function。
出于某种原因，我的代码无效。 每当调整#container元素的大小时，函数就会运行，并且应该将#main的高度调整为与可见幻灯片相同的值。
但是，呃..没有bueno。 我的控制台中没有显示任何错误。 思考？
http://jsfiddle.net/danielredwood/2G4ky/3/
幻灯片插件： http ： //jquery.malsup.com/cycle/
HTML：
CSS：
#container { max-width:960px; } #main { max-width:780px; height:520px; margin:0 auto 40px; overflow:hidden; background:#ccc; } #main img { width:100%; height:auto; }
JavaScript的：
$('.home').cycle({ fx:'fade' }); $('#container').resize(function(){ var child_height = $('.slide:visible').height(); $('#main').css('height', child_height); });
我建议使用插件的回调选项，特别是after ：
$('.home').cycle({ fx:'fade', after: function(){ $('#main').css('height',$(this).outerHeight()); } });
更新了JS Fiddle演示 。
参考文献：
-
cycle()插件的’回调’文档/演示
而不是在幻灯片回调之前或之后运行，这会在窗口resize时缩放图像。 完善！
$(window).resize(function() { $('#main').css('height',$('img.slide:visible').height()); });
我发现这很好用：
$(window).load(function() { var imageHeight = $(".image-box img").height(); $(".image-box img").parent().css('height', imageHeight); }); $(window).resize(function() { var imageHeight2 = $(".image-box img").height(); $(".image-box img").parent().css('height', imageHeight2); });
其中“.image-box”是图像的容器。
我还将此添加到我的CSS中以获得响应：
.image-box img{ max-width: 100%; height:auto !important;
}