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

Question

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

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

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

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

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

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

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

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

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

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

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

Answer 1

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

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

Ближайшие возвращает объект JQuery 0 или 1 элемент. Вероятно, вы имеете в виду:

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

Answer 2

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

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