根據屏幕大小設置圖像以及div寬度

Question

我使用的div的尺寸是使用jquery設置的，但我希望在該div中顯示圖像，並且我還希望圖像相應地調整大小以適合在div中。

這怎麼辦？

Answer 1

如果您使用jQuery來處理DIV元素的參數，那麼您可以使用相同的方法來處理圖像的高度/寬度。你可以嘗試這樣的：

var MyImg = document.getElementById(img_id); 
var Div = document.getElementById(div_id); 
document.MyImg.style.height = document.Div.style.height; 
document.MyImg.style.width = document.Div.style.width; 

如果你想留下一個邊陲，從高度和寬度都減去幾個像素，集中在水平和垂直對齊的圖像。

插件：或者，您可以將CSS屬性設置爲： height：auto; 寬度：自動;

我明白你想使用jQuery，是我不好......

Answer 2

你只需要設置圖像作爲div的背景和設定background-size到100%：

background: url(http://www.google.com/intl/en_com/images/srpr/logo1w.png) no-repeat; 
background-size: 100%; 

工作例如（用DIV寬度玩，如果你想）：

http://jsfiddle.net/KWKuG/

Answer 3

你可以設置一個最大寬度和HEIG與CSS的圖像100％的高：

img { 
max-width:100%; 
max-height:100%; 
} 

這樣，你會保持圖像的縱橫比。

Answer 4

不知道你是否真的想像這樣傾斜圖像，但你可以用CSS來設置。

#yourDiv img { width: 100%; height: 100%} 

例如：http://jsfiddle.net/Shx3z/1/