如何使父容器调整其高度以匹配缩放的div

Question

I'm using jQuery to dynamically scale and zoom a div based on the dimensions of the parent container. However, I'm having a difficult time detecting the height. I have the parent set to auto, but it doesn't detect the change in height as the div rescales.

$(window).load(function () {
    console.log( "window load" );
    function zoomSquare() {
        var $square = $('.square');

        var vh = $square.parent().width(); // Get the height of whatever the parent of square is
        var squareHeight = $square.width(); // Grab the height of .square
        var desiredHeight = Math.round(vh * 0.95);
        var zoom = (desiredHeight / squareHeight);

        //$square.css('zoom', zoom);
        $square.css('-webkit-transform', 'scale(' + zoom + ')');
        $square.css('-moz-transform', 'scale(' + zoom + ')');
        $square.css('-o-transform', 'scale(' + zoom + ')');
        $square.css('transform', 'scale(' + zoom + ')');
    }

    // When the browser is resized
    $(window).on('resize', function () {
        console.log( "resize" );
        zoomSquare();
    });

    // When the page first loads
    $(document).ready(function () {
        console.log( "dom ready" );
        zoomSquare();
    });

});

I have a fiddle here http://jsfiddle.net/sarahwhatsup/33cg5/3/

You can see my background wrapper stays the same height and doesn't expand to fit the scaling div. How do I go about fixing it so the wrapper always fits around the scaled div inside?

Answer 1

i had a similar question , and i guess the solution works here too: http://jsfiddle.net/VTAH4/1/
This solution uses a plugin to detect the re-sizing: Ben Alaman's resize plugin .

$(window).load(function () {

    $.fn.animateHeight = function (container) {
         var thisHeight = $(container).map(function (i, e) {
        return $(e).height();
         }).get();

         return this.animate({
        height: thisHeight
         });
    };

    // When the browser is resized
    $(window).resize(function () {
        $(".square").animateHeight(".wrapper")
    });

    // When the page first loads
    $(document).ready(function () {     
        $(".square").animateHeight(".wrapper")
    });

});