调整图像以适合其容器

#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' />"; 
}

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

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

来源

2010-03-09 jack moore

这是背后的（不好支持）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库。

来源

2010-03-09 04:02:03

很好用 - 谢谢。 – 2010-03-09 04:11:37

你可能想试试这个：

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

我把它放在$(window).load()因为它根本不document.ready()工作：最高加载图像之前后者火灾等之前它们的尺寸是已知的。（更确切地说，实际上它也可以工作，但只是因为图像已经在浏览器的缓存中，如果清空缓存，它会在接下来的显示中失效）。

来源

2010-03-09 04:53:40

调整图像以适合其容器

回答

相关问题