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

Question

我正在使用 jQuery 根据父容器的尺寸动态缩放和缩放 div。但是，我很难检测高度。我将父级设置为自动，但它没有检测到 div 重新缩放时的高度变化。

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

});

我这里有个小提琴http://jsfiddle.net/sarahwhatsup/33cg5/3/

您可以看到我的背景包装保持相同的高度，并且不会扩展以适应缩放 div。我该如何修复它以使包装器始终适合内部缩放的 div？

Answer 1

我有一个similar question，我想这个解决方案在这里也有效： http://jsfiddle.net/VTAH4/1/
此解决方案使用插件来检测大小调整：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")
    });

});