HTML resizing image based on it's size

I encountered this problem while making an online shopping mall page.

Most of the photos uploaded to my db have different sizes and I had to resize them all. But when I did, some of the pictures' resolutions became really bad when I set all of their height the same.

I wanna add something like an if clause that determines size of the image then resizes only the images which are bigger than the given size.

I want to add something looks like this, I guess:

if (img height < 300px) {
   img height = "100px";
} else {
   img height = "400px";
}

Here's my current code:

<ul class="prdList column4">
        <li class="item" id="anchorBoxId_{$product_no}">
            <div class="box">
                <span class="chk"><input type="checkbox" class="{$product_compare_class} {$product_compare_display|display}" /></span>
                <a href="/product/detail.html{$param}" name="anchorBoxName_{$product_no}"><img src="{$image_big}"  id="{$image_medium_id}" alt="" class="thumb" /></a>
                <div class="status">
                    <div class="icon">{$soldout_icon} {$recommend_icon} {$new_icon} {$product_icons} {$benefit_icons}</div>
                    <div class="button"><div class="option">{$option_preview_icon}</div> {$basket_icon} {$zoom_icon}</div>
                </div>
                <p class="name">
                    <a href="/product/detail.html{$param}" class="{$product_name_display|display}"><strong class="title {$product_name_title_display|display}">{$product_name_title} :</strong> {$product_name}</a>
                </p>
                <ul module="product_ListItem">
                    <li class="{$item_display|display}"><strong class="title {$item_title_display|display}">{$item_title} :</strong> {$item_content}</li>
                    <li class="{$item_display|display}"><strong class="title {$item_title_display|display}">{$item_title} :</strong> {$item_content}</li>
                </ul>
            </div>
        </li>
        <li class="item" id="anchorBoxId_{$product_no}">
            <div class="box">
                <span class="chk"><input type="checkbox" class="{$product_compare_class} {$product_compare_display|display}" /></span>
                <a href="/product/detail.html{$param}" name="anchorBoxName_{$product_no}"><img src="{$image_big}" id="{$image_medium_id}" alt="" class="thumb" /></a>
                <div class="status">
                    <div class="icon">{$soldout_icon} {$recommend_icon} {$new_icon} {$product_icons} {$benefit_icons}</div>
                    <div class="button"><div class="option">{$option_preview_icon}</div> {$basket_icon} {$zoom_icon}</div>
                </div>
                <p class="name">
                    <a href="/product/detail.html{$param}" class="{$product_name_display|display}"><strong class="title {$product_name_title_display|display}">{$product_name_title} :</strong> {$product_name}</a>
                </p>
                <ul module="product_ListItem">
                    <li class="{$item_display|display}"><strong class="title {$item_title_display|display}">{$item_title} :</strong> {$item_content}</li>
                    <li class="{$item_display|display}"><strong class="title {$item_title_display|display}">{$item_title} :</strong> {$item_content}</li>
                </ul>
            </div>
        </li>
    </ul>
</div>