在div內自動調整圖像尺寸

因此，我正在構建此自定義管理面板，以便用戶輕鬆地將自己的網站數據構建到模板集合中。我正在運行的主要問題是處理圖像。在一個模板上有一個div，大小爲380 x 150像素。我的問題是：在div內自動調整圖像尺寸

有沒有辦法自動調整大小的圖像適合div和也沒有它伸展或剪輯？我對所有的解決方案都很開放，但是如果它在IE中工作的話，那真是太棒了。提前致謝。

2011-08-24 Davey

如何設置圖像的寬度並讓瀏覽器按比例設置高度？ – Dor

如果您允許div在不保持長寬比的情況下調整大小，您如何不能伸展或剪裁？ –

用普通的CSS，沒有。您需要知道包含框和目標圖像的大小，並在圖像上設置適當的大小。這意味着使用Javascript來進行計算並適當地更改圖像的CSS。 –

是的，這將是：

#your_div.div{ 
    width:380px; 
    height:150px; 
} 
#your_div img{ 
    max-width:100%; 
    max-height:100%; 
}

可以將圖像尺寸調整，但不失真，你也可以有地方留下一些「空白」空間，但是這在邏輯上預期。

2011-08-24 19:49:39 darma

好吧...誰給了答案-1，你能解釋一下嗎？因爲我在網站中使用此代碼，並且它工作得很好。 – darma

意外點擊-1，意思是點擊+1 :) – Chamilyan

- 酷謝謝:) – darma

你可以使用jQuery來實現這一點。如果正在動態添加圖像（飛），你可以利用.live（）...

$('.someDivClass').children('img').live(function(){ 

var desiredWidth = /* your own logic here */; 
$(this).width(desiredWidth); 

});

或者，你可以只針對圖像的高度，以及（或兩者）。

2011-08-24 19:51:13

回答