How do I make a parent container adjust it's height to match a scaled div

[rayon]

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.\[code\]$(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(); });});\[/code\]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?