Question

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

这几乎完美无缺。 Chrome让我感到悲伤。在Chrome中查看小提琴时，请恢复Chrome并降低Chrome的宽度。然后，最大化Chrome。图像不会按照应有的比例缩放。

我在Firefox，Internet Explorer和Chrome中测试了这个。 Chrome是这三种中唯一表现出这种行为的人。我该如何解决这个问题？

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

Answer 2

解决方案最终是使用jQuery“摇摆”包含元素，迫使Chrome重新评估所包含图像的大小。

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

修改

对于稍后阅读此内容的人来说，此错误已得到修复。原始代码（链接到问题中）现在可以使用。

jQuery + Fluid Images Chrome Bug

2 个答案: