How to get images to resize in chrome, IE and safari

I am developing a website which uses the jquery tabs api. For each tab I have a pic开发者_高级运维ture which I want to resize when the size of the browser is changed.

This is an example of one of the tabs

<li style='width:15%'>
  <a href="/fu...">
   <img src="/Funde..." alt="BreakOut" class="breakoutFundviewImage">
  </a>
</li>

I have it working fine in firefox and IE by using simple CSS

.breakoutFundviewImage
{
    height:30px;    
    width: 100%;    
}

Unfortunately this doesn't work in chrome, safari. The images are simply displayed at full size and therefore only half of the image is seen in the tab.

Does anyone know the correct way of doing this? Any help would be great.

Don't set a height on the images or you'll break the aspect ratio. You code is correct so if they aren't resizing then it's because the parent tags are wider than you think they are. You probably have some overflow:hidden going on where the inner elements are being cropped instead of resized.