CODEWITHSUNDEEP
jquerycssimageinternet-explorergoogle-chrome
user602240
user602240

Reputation: 79

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 picture 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.

Upvotes: 2

Views: 654

Answers (1)

SpliFF
SpliFF

Reputation: 38976

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.

Upvotes: 1

Related Questions