How to ReSize in WebPart?

Hi all

I am try to make a WebPart. my code can automatically adjust the width of the page.

But I hope Proportional adjust the height, ( 1 : 1) ?

please help me, Thx!

function ResizeIFrame() {
            if (window.parent == null)
                return;

            var senderId;
                var params = document.URL.split("?")[1].split("&");
                for (var i = 0; i < params.length; i = i + 1) {
                    var param = params[i].split("=");
                    if (param[0].toLowerCase() == "senderid")
                        senderId = decodeURIComponent(param[1]);
                }


            var height = $(document).height()
            var width =  "100%"  //auto

            var message = "<Message senderId=" + senderId + " >"+ "resize(" + width + "," + height + ")</Message>";
            document.getElementById("senderId").innerHTML = senderId;

            window.parent.postMessage(message, '*');
        }
        $(document).ready(
         function () {
             ResizeIFrame();
         });

<ClientWebPart Name="ReSize" Title="ReSize" Description="ReSize Test" DefaultWidth="300" DefaultHeight="200">

 note:  I want to get width  , but  $(document).width()  it's alway get 300px