خطأ jQuery + Fluid Images في Chrome

Question

هنا لدي بعض jQuery البسيط الذي يحدد ارتفاع سلسلة من العناصر العائمة بناءً على عرضها.داخل كل عنصر لدي صورة، والتي أجبرت على البقاء داخل العناصر العائمة باستخدام max-width و max-height.

هذا يعمل بشكل مثالي تقريبًا.كروم يعطيني الحزن.أثناء عرض هذا الكمان في Chrome، قم باستعادة Chrome وتقليل عرض Chrome.ثم قم بتكبير Chrome.الصور لا تتسع كما ينبغي.

لقد اختبرت هذا في Firefox وInternet Explorer وChrome.Chrome هو الوحيد من بين هؤلاء الثلاثة الذي يُظهر هذا السلوك.كيف يمكنني اصلاح هذا؟؟

انقر هنا لرؤية الكمان.

Answer 1

انتهى الحل إلى استخدام jQuery "لهزه" العنصر المحتوي، مما يجبر Chrome على إعادة تقييم حجم الصور المضمنة.

ملف jsFiddle

المسج الجديد:

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 فقط هو الخيار الأفضل.لقد قمت بتحديث الخاص بك كمان

يحرر:

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