動態加載和調整圖像

Question

HTML/Javascript - 我想要動態加載圖像，並且要加載的圖像可以具有不同的縱橫比。

我想讓圖像適合包含div的特定區域 - 包含div的寬度和80％高度的40％的區域。由於它們具有不同的縱橫比，當然它們不會總是用完整個區域，但是我想調整它們以使它們不超出邊界。但是，我不知道是否應該指定寬度或高度（並將夥伴屬性設置爲自動），因爲我不知道圖像的高寬比會提前多久。

有沒有一種CSS方式來做到這一點？或者我需要計算所需的寬度使用JavaScript？

PS我只需要在Firefox 3.5中做到這一點！

Answer 1

我的解決辦法是提供將綁定的對象到所需要的大小的容器DIV：

#img_container { 
    width: 48%; 
    height: 80%; 
} 

那麼對於圖像本身我分配最大寬度和由火狐識別最大高度：

#img_container img { 
    max-width: 100%; 
    max-height: 100%; 
    display: block; 
} 

這樣，圖像自動調整自己最多容器的寬度，但保持正確的長寬比。萬歲！

Answer 2

您的服務器可以找出圖像的尺寸，並在請求圖像時發送這些信息。否則，您需要等待圖像加載之後才能使用javascript。

但是，還有另一種方法。請求圖像，告訴服務器你有空間的尺寸。然後，它可以生成適當版本的圖像並將其緩存，然後將已經完全適合尺寸的圖像發送到瀏覽器。

更新 的另一種方式，這可能是可接受的，你是設置div容器像這樣...

.mydiv { overflow: hidden; } 

然後設置要固定在高度和auto爲寬度的圖像。這會導致在圖像的左側和右側裁剪過寬的圖像。如果您的情況可以接受，那麼這是一個非常簡單的解決方案。