jQuery + Fluid Images Chrome Bug

Question

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

这几乎可以完美运行。 Chrome 让我感到悲伤。在 Chrome 中查看该 fiddle 时，还原 Chrome 并减小 Chrome 的宽度。然后，最大化 Chrome。图像未按应有的比例缩放。

我已经在 Firefox、Internet Explorer 和 Chrome 中对此进行了测试。 Chrome 是这三者中唯一表现出这种行为的。我该如何解决这个问题？？

Click here to see the fiddle.

Answer 1

删除您的 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);
});
​