我如何使父容器調整它的高度以匹配縮放的div

Question

我正在使用jQuery根據父容器的尺寸動態縮放div。但是，我很難檢測到身高。我有父設置爲自動，但它不檢測高度的變化，因爲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(); 
    }); 

}); 

我這裏有http://jsfiddle.net/sarahwhatsup/33cg5/3/

小提琴你可以看到我的背景包裝保持相同的高度，不會展開，以適應縮放股利。我該如何解決它，所以包裝始終適合在裏面的縮放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") 
    }); 

});