Yet More jQuery–Resize an Image Example

I inherited a web part from a client’s old vendor and it has an image size problem.  The images should be 60×50 but for some odd reason, the original vendor forced them into 42×42, so they look squashed:


Good Image

Bad Image

Here’s the markup (somewhat simplified):

<table class=’extended-outlook’>
      <th  width=’100′>3 Tuesday</th>

    <tr class=’forecast’>
      <td width=’100′>
          <li class=’high’>High: 72&deg;F</li>
          <li class=’low’>Low: 44&deg;F</li>
          <li class=’condition’>Sunny
            <img src=’×50/en/trans/cond007.png’ width=’42’ height=’42’ alt=” />



You’ll note that even though the path to the image itself shows the proper dimension (60×50) the original vendor forced it in 42×42.  Why?  Crazy.

Anyway, I wanted a quick and easy solution to this issue and I turned to jQuery.  The trick was to locate all of the appropriate <img> tags.  I didn’t want to muck about with any other img tags (of which there are many).  This bit of jQuery did the trick:

<script type="text/javascript" src=""></script>

<script type="text/javascript">
     $(document).ready(function () {

         $(‘li.condition > img’).each(function (index, item)
             $(item).css("width", "60"); 
             $(item).css("height", "50");
     }); // on document load

That bit of code finds the collection <li> tags whose class is “condition” and <img> children.  It then iterates through all of that.  Worked like a charm.

I could probably streamline it, but I never was a the kind of unix guy that solved π to 18 digits precision using sed and awk and I’m not that kind if jQuery guy either Smile.


Subscribe to my blog.

Follow me on Twitter at

Leave a Reply

Your email address will not be published. Required fields are marked *