每當瀏覽器窗口縮小時，我應該使用哪些代碼自動調整圖像大小？

開始與一個空白的屏幕，假設我有以下的HTML代碼：每當瀏覽器窗口縮小時，我應該使用哪些代碼自動調整圖像大小？

<body> 

    <div id="image"> 
    <img src="pic.jpg"> 
    </div> 

</body>

和CSS爲：

#image{ 
width:100%; 
height:auto; 
}

或

#image img { 
width:100%; 
height:auto; 
}

我很困惑在這裏，因爲在圖像中沒有變化，因爲圖像div具有圖像的尺寸（圖像尺寸是1920×1080像素），並且其100％是整個圖像本身。但如果我將寬度設置爲50％，仍然沒有變化。

我只是希望根據瀏覽器調整圖像大小，我的屏幕分辨率是1366 * 768，所以最初我需要圖像以適應這一點，當我調整瀏覽器大小時，我需要圖像的大小作相應改變。

來源

2013-10-12 Rahul Khatri

'img {max-width：100％}'應該這樣做。 –

@ŠimeVidas也嘗試過......但沒有運氣。 –

http://jsfiddle.net/sAKAh/ –

設置包含div的大小不會更改圖像的大小。設置風格的圖像，而不是：

#image img { 
width:100%; 
height:auto; 
}

演示：http://jsfiddle.net/jcJtM/

來源

2013-10-12 20:45:06 Guffa

哦，對不起，我忘了提及.. ..但我也嘗試過，但仍然沒有變化 –

@RahulKhatri：當我嘗試它時，它工作正常。我添加了一個指向我用來測試它的代碼的鏈接。 – Guffa

你是對的，它的工作正常...但仍然沒有響應在我的瀏覽器（火狐）...不知道最新錯誤... 是因爲我使用的圖像比我的屏幕分辨率大？或一些瀏覽器兼容？ –

你試過JavaScript的？

windowWidth = $(window).width(); 
windowHeight = $(window).height(); 

$('img').css({ 
    "width" : windowWidth, 
    "height" : windowHeight 
}); 

$(window).resize(function(){ 
windowWidth = $(window).width(); 
windowHeight = $(window).height(); 
    $('img').css({ 
    "width" : windowWidth, 
    "height" : windowHeight 
}); 
});

來源

2013-10-12 20:49:39 swsa

每當瀏覽器窗口縮小時，我應該使用哪些代碼自動調整圖像大小？

回答

相關問題