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 ......这完全是随机的。我可以使用：

来拉伸它（或缩小它的大小）

.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＆gt; 7以及其他所有内容，然后使用IE6条件来设置width和height之间最需要的选项。它在IE6上看起来不一样，但它是一个简单的解决方案。（IE6的使用量下降了大约10％，所以这不再那么糟了。）

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

Answer 2

您可能想尝试一下：

$(window).load(function () {
    if ($('#my_image').width() > 300) {
        $('#my_image').css({'width':'300px'});
    }
});

我将其放在$(window).load()中，因为它在document.ready()中无效：后者在图像加载之前激发，因此在它们的尺寸已知之前就会激发。

（更准确地说，事实上它也有效，但仅仅因为图像已经在浏览器的缓存中。如果你清空缓存，它将在下一次显示后失败。）

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

2 个答案: