Jquery code to resize the height of fluid images to proper one
<p>I import URLs of product images from XML. Most images are 320px x 240px but some vary in height.</p>

<p>I then make them smaller with css:</p>

<pre><code>.featured {
    width: 12.5em
}

.featured img {
    width: 100%;
    height: auto
}
</code></pre>

<p>The problem is the height auto - if the images have different heights than 240 px, this breaks the layout.</p>

<p>What I am trying to do is use jquery to search for images which differ in height and resize them.</p>

<p>Here is what I have came up with:</p>

<pre><code>function resize_images(){
    var width = $(".model img").width();
    var height = $(".model img").height();
    var result = width / height;
    $('.test').append(result);
}
</code></pre>

<p>I get the width and height of a image and I divide them.</p>

<p>Images should be in the 4:3 format (320px x 240px).</p>

<p>If the result is 1,33 than the image is ok.</p>

<p>If the result is different, then modify the image height until the width and height of the image has the desired 4:3 ratio.</p>

<p>Any ideas if I'm on the right track?</p>
