jQuery + Fluid Images Chrome Bug

Question

Here I've got some simple jQuery which sets the height of a series of floated elements based on their width. Inside each element I have an image, which is forced to remain inside the floated elements using max-width and max-height.

This almost works perfectly. Chrome is giving me grief. While viewing that fiddle in Chrome, restore down Chrome and reduce Chrome's width. Then, maximize Chrome. The images do not scale as they should.

I've tested this in Firefox, Internet Explorer, and Chrome. Chrome is the only one of those three that exhibits this behavior. How can I fix this??

Click here to see the fiddle.

Answer 1

The solution ended up being to use jQuery to "jiggle" the containing element, forcing Chrome to reevaluate the sizing of the contained images.

The jsFiddle

The new jQuery:

var element = 'li';
var ratio = 1.25;

function makeProportional(element, ratio) {
    $(element).parent().css('width', '99%');
    var unitWidth = $(element).width();
    $(element).css('height',unitWidth*ratio);
    $(element).parent().css('width', '100%');
}

makeProportional(element,ratio);


$(window).resize(function() {
    makeProportional(element,ratio);
});

EDIT:

For anyone reading this later, this bug has been fixed. The original code (linked to in the question) now works.

Answer 2

Removing your jQuery actually makes it work the way you want it, AND it loads faster. Using CSS only I think is the best option. I updated your fiddle

EDIT:

var element = 'li';
var ratio = 1.25;

function makeProportional(element, ratio) {
    $(element).css('height',$(element).width()*ratio);
    $('img').css('height',$(element).width()*ratio);
}

makeProportional(element,ratio);


$(window).resize(function() {
    makeProportional(element,ratio);
});
​