調整圖像以適合其容器

#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

調整圖像以適合其容器

回答

相關問題