jQuery + Fluid Images Chrome Bug - PullRequest
Новая
       11

jQuery + Fluid Images Chrome Bug

0 голосов
/ 09 марта 2012

Здесь У меня есть простой jQuery, который устанавливает высоту ряда плавающих элементов на основе их ширины. Внутри каждого элемента у меня есть изображение, которое вынуждено оставаться внутри плавающих элементов, используя max-width и max-height.

Это почти идеально работает. Хром дает мне горе. Просматривая эту скрипку в Chrome, восстановите Chrome и уменьшите ширину Chrome. Затем разверните Chrome. Изображения не масштабируются так, как должны.

Я проверял это в Firefox, Internet Explorer и Chrome. Chrome - единственный из этих трех, который демонстрирует такое поведение. Как я могу это исправить ??

Нажмите здесь, чтобы увидеть скрипку.

Ответы [ 2 ]

1 голос
/ 09 марта 2012

Удаление вашего 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);
});
​
0 голосов
/ 14 марта 2012

В итоге было решено использовать 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);
});

EDIT:

Для тех, кто читает это позже, эта ошибка была исправлена. Оригинальный код (связанный с вопросом) теперь работает.

...