根据父宽度jQuery调整图像大小

Question

我正在尝试缩放图像以适应其父元素宽度，尤其是对于位于表格中的图像。

问题在于，在确定父元素的宽度时，不同的浏览器和平台似乎表现不同。

所以我试图在$(document).ready中获取父td元素的宽度：

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

然后在$(window).load（当应该加载图像时）我尝试根据td的宽度css样式设置图像的宽度：

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

但这似乎不可靠。它有时会起作用，并且在某些浏览器中有效，但有时会失败，导致td宽度的值不正确。

我希望能够在加载图像之前获得td的宽度，这样宽度不会因扩展它的图像而失真。

当然，如果不是IE8以及不支持max-width和max-height，那么这一切都不是必需的，但事实并非如此。

如何在加载图像之前执行此操作并获取父宽度？

顺便说一句：td可以在100％宽度的表格中以宽度百分比值开头。

Answer 1

根据caniuse.com，IE 7和IE 8确实支持max-height和max-width。它只有IE 6不能（并且有许多变通方法可以满足您的目的，以及IE的条件注释可以用来沙箱化任何给定版本的IE所需的任何代码）。

您是否尝试在CSS中使用width: 100%;作为图片？它应该适用于所有浏览器，并且不需要一堆JavaScript，只要你在加载时设置父元素的宽度（如果你在加载后改变宽度，你可能需要一个一点点JavaScript来“刷新”图像的大小，但它应该比你现在所做的要少得多。

Answer 2

此行不正确：

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

nearest返回一个带有0或1个元素的jQuery对象。你可能意味着：

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