jQuery + Fluid Images Chrome Bug

Question

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

这几乎是完美的。Chrome让我很伤心。在Chrome中查看时，请恢复Chrome并减小Chrome的宽度。然后，最大化Chrome。图像没有按应有的比例缩放。

我已经在Firefox、Internet Explorer和Chrome中测试过了。Chrome是这三种浏览器中唯一表现出这种行为的浏览器。我该怎么解决这个问题？？

单击此处查看小提琴。

Answer 1

删除jQuery实际上可以让它按您想要的方式工作，而且加载速度更快。我认为只使用CSS是最好的选择。我更新了你的小提琴

编辑：

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

Answer 2

最终的解决方案是使用jQuery"抖动"包含的元素，迫使Chrome重新评估包含图像的大小。

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

编辑：

对于以后阅读本文的人来说，这个错误已经修复。原始代码（问题中链接到）现在可以工作了。