javascript - 调整图像大小以适合其容器

Question

#foo {width: 300px; height: 400px; overflow: hidden;}

<div id="foo"></div>

this.someimage = randomImageUrl;
$("foo").innerHTML = "<img src='"+this.someimage+"' class='fooimage' />";

现在，图片可能是 200x200 或 1100x400 ...这完全是随机的。我可以使用以下方法拉伸(stretch)它(或减小其大小):

.fooimage {width: 300px; height: 400px;}

$("foo").innerHTML = "<img src='"+this.someimage+"' class='fooimage' />";

或者我可以测试它的大小:

imgHeight = newImg.height; 
imgWidth = newImg.width;

...也许是这样的:

if(imgHeight >400){
   $("foo").innerHTML = "<img src='"+this.someimage+"' height='400' />";
}

浏览器将完成剩下的工作。

但是一定有更好的东西。有任何想法吗？谢谢! :)

Answer 1

这是(支持较差的)max-width 和 max-height 属性背后的想法。据说 IE7 支持这些，并且其他所有现代版本也支持它们。

在图像上，您可以设置 max-width、max-height，支持 IE > 7 和其他所有内容，然后选择您真正需要的大多数在 width 和 height 之间，使用 IE6 条件来设置。它在 IE6 上看起来不太一样，但这是一个简单的解决方案。 (IE6 使用率下降了大约 10%，所以这已经不再那么糟糕了。)

或者您可以使用the "IE7" library只需设置 max-width 和 max-height，代价是另一个奇怪的 Javascript 库。