Изменить размер изображения в соответствии с родительской шириной jQuery

Question

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

Проблема заключалась в том, что разные браузеры и платформы ведут себя по-разному, когда речь идет об определении ширины.родительского элемента.

Поэтому я попытался получить ширину родительского элемента td в $(document).ready:

$('td').each(function () {
    var width = $(this).width();
    $(this).width(width);
});

А затем в $(window).load (когда изображения должны быть загружены) Я пытаюсь установить ширину изображений в соответствии со стилем width css в td:

var parentWidth = $(this).parent().width();
if ($(this).closest('td')) {
    parentWidth = $(this).closest('td').css('width').replace('px', '');
}

Но это кажется ненадежным.Иногда это работает, и в некоторых браузерах, но иногда это приводит к сбою, давая неправильное значение ширины td.

Я хочу иметь возможность получить ширину td до того, как изображениязагружен, так что ширина не искажается изображениями, расширяющими его.

Конечно, ничего из этого не потребовалось бы, если бы не IE8 и ниже, не поддерживающие max-width и max-высота, но это не так.

Как я могу это сделать и получить ширину родительского элемента перед загрузкой изображений?

Кстати: td может иметь процентное значение ширины для начала св таблице шириной 100%.

Answer 1

Эта строка неверна:

if ($(this).closest('td'))

closest возвращает объект jQuery с 0 или 1 элементом.Вы, вероятно, имеете в виду:

if ($(this).closest('td').length == 1)

Answer 2

Согласно caniuse.com , IE 7 и IE 8 фактически поддерживают max-height и max-width.Это не может сделать только IE 6 (и задокументировано несколько обходных путей, которые могут соответствовать вашим целям, а также условные комментарии IE, которые можно использовать для «песочницы» любого кода, необходимого для работы любой конкретной версии IE).

Вы пытались просто использовать width: 100%; в CSS для своего изображения?Он должен работать во всех браузерах и устраняет необходимость в куче JavaScript, если вы устанавливаете ширину родительского элемента (ов) под нагрузкой (если вы изменяете ширину после загрузки, вам может понадобитьсянемного JavaScript для «обновления» размера изображения, но оно должно быть значительно меньше того, что вы делаете сейчас).