JQuery zooming multiple items, aspect ratio
<p>Can anyone help me maintain gap between these boxes when zooming, I think anyone who has done multimedia / graphics will know this algorithm required </p>

<p>I have created a separate fiddle for it.
<a href="http://jsfiddle.net/p9BJ8/" rel="nofollow">http://jsfiddle.net/p9BJ8/</a></p>

<pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;script src="http://code.jquery.com/jquery-1.9.0.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id="canvas"&gt;
        &lt;div id="innercanvas"&gt;
            &lt;div class="square" style="top:30px; left:30px; width:40px; position:absolute; height:40px; background-color:red"&gt;&lt;/div&gt;
            &lt;div class="square" style="top:100px; left:90px; width:40px; position:absolute; height:40px; background-color:red"&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;input type="submit" id="ZoomIn" value="+" /&gt;

    &lt;script type="text/javascript"&gt;
        var zoom = 40;
        $(document).ready(function () {

            $('#ZoomIn').bind('click', function () {
                zoom = zoom + 5;
                $("#innercanvas .square").each(function (index) {

                    $("#innercanvas").width($("#innercanvas").width + 5);
                    $("#innercanvas").height($("#innercanvas").height + 5);

                    var id = $(this).attr("id");


                        var _offset = $(this).offset();
                        $(this).offset({ top: _offset.top + 5, left: _offset.left + 5 });
                        $(this).width(zoom);
                        $(this).height(zoom);                   
                });
            });    
        });

    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
