Make image stay the same size after resize of column

Question

I have a table that sorts the values when the user clicks the columnheader. When the table a sorted an arrow image is displayed after the columnname. When the user resize the column the image gets larger. I want the image to stay the same size when the column are resized.

How do I make the image stay the same size when the column are resized?

<th title="">
   <div id="p0col0h" style="width:73px;">   
        <a id="0.0.desc">Tabell
           <img src="img/hrm/pal_sort_asc.gif"/>
        </a>
        <div class="resizeColdiv"></div>
   </div>
</th>

Here is a JSFiddle demo. Resize the first column in the demo and then the image gets larger. I want it to stay the same.

Answer 1

Add this to your CSS:

#p0col0h a img{
    max-width:33px;
    max-height:33px;
}

Of course the max-width and max-height pixels should be the image ones, I just plugged in random ones here!

Demo : http://jsfiddle.net/wdB7t/1/

Answer 2

Also add "Height".
Using max-height will reduce your image if it gets below the "max-". So just use Height and Width

img{
    width:50px;
    height:50px;
}