jQuery + Fluid Images Chrome Bug

Question

Here我有一些简单的jQuery，它根据它们的宽度设置一系列浮动元素的高度。在每个元素的内部，我都有一个图像，它使用max-width和max-height被强制保留在浮动元素中。

这几乎完美地工作。 Chrome让我感到悲伤。在Chrome浏览器中查看该小提琴的同时，还原Chrome并降低Chrome的宽度。然后，最大化Chrome。这些图像不能按比例缩放。

我已经在Firefox，Internet Explorer和Chrome中测试过了。 Chrome是展现此行为的三家公司中唯一的一家。我怎样才能解决这个问题？？

Click here to see the fiddle.

Answer 1

该解决方案最终被使用jQuery“抖动”包含的元素，迫使浏览器重新评估所包含的图像的大小。

The jsFiddle

新的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); 
}); 

编辑：

对于任何人阅读此之后，这个错误已得到修复。原始代码（链接到问题中）现在可用。

Answer 2

删除您的jQuery实际上使得它的工作你想要的方式，并将其加载速度更快。只使用CSS我认为是最好的选择。我更新了fiddle

编辑：

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); 
}); 
​