I'm currently in the process of building a website that utilizes the jquery tabs api. Each tab on the site contains an image that I would like to resize dynamically as the browser window size changes.
Here is an example of one of the tabs:
<li style='width:15%'>
<a href="/fu...">
<img src="/Funde..." alt="BreakOut" class="breakoutFundviewImage">
</a>
</li>
My CSS solution works perfectly in Firefox and IE:
.breakoutFundviewImage
{
height:30px;
width: 100%;
}
However, this approach fails in Chrome and Safari. The images end up being displayed at full size, causing only half of the image to be visible in the tab.
If anyone knows the correct method for achieving this resizing behavior across all browsers, your assistance would be greatly appreciated.