Using jQuery to adjust a parent element's height to match it's visible child's height

Question

I\'ve got a slideshow running in a container and need the height of the container to match the visible slide\'s height. Unfortunately the images are absolutely positioned and th

Answer 1

I found this to work well:

$(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);
}); 

Where ".image-box" is the container for your images.

I also added this to my CSS for responsiveness:

.image-box img{
max-width: 100%;
height:auto !important;

}

Answer 2

Instead of running before or after the slideshows callback, this scales the image as the window resizes. Perfect!

$(window).resize(function() {
    $('#main').css('height',$('img.slide:visible').height());
});

Answer 3

I'd suggest using the plug-in's callback options, particularly the after:

$('.home').cycle({
    fx:'fade',
    after: function(){
        $('#main').css('height',$(this).outerHeight());
    }
});

Updated JS Fiddle demo.

References:

• cycle() plug-in's 'callback' documentation/demonstration