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.