How do i constrain an image to a maximum width/height?
<p>Right now I'm trying the following code. This works most of the time (on a reload, after the 1st visit) but when visiting the page the first time, the image isn't resized properly. 
I <em>think</em> this is because because the image is loaded before the page ready callback is triggered.</p>

<p>I've tried calling the <code>.resize()</code> function directly in the <code>.ready()</code> callback but the image still don't resize on occasion because the image may bot be loaded when the <code>.ready()</code> callback is triggered.</p>

<p>How should i go about hooking up the <code>resize()</code> function to get the images to resize properly regardless when the load?</p>

<pre><code>function resize($img) {
    var max_size_w = 200;
    var max_size_h = 200;
    var h = $img.height();
    var w = $img.width();
    if (h &gt; max_size_h) {
        h = max_size_h;
        w = Math.ceil($img.width() / $img.height() * max_size_h);
    }
    if (w &gt; max_size_w) {
        h = Math.ceil($img.height() / $img.width() * max_size_w);
        w = max_size_w;
    }
    $img.css({ height: h, width: w });
}

$().ready(function() {
    // Size the images correctly
    $(".personPictureImage").each(function() {
        $(this).find("img").load(function() { resize($(this)); });
    });
});
</code></pre>

<p><strong>UPDATE:</strong> The HTML</p>

<pre><code>&lt;div class="personPicture"&gt;
    &lt;div class="personPictureFrame"&gt;
        &lt;div class="personPictureImage"&gt;
            &lt;a href="../images/media/popup/46.png" class="lightbox"&gt;
                &lt;img src="../images/media/thumbnail/46.png" alt=""&gt;
            &lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="personPictureFrameTL"&gt;&lt;/div&gt;
        &lt;div class="personPictureFrameTR"&gt;&lt;/div&gt;
        &lt;div class="personPictureFrameBL"&gt;&lt;/div&gt;
        &lt;div class="personPictureFrameBR"&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
