如何根據窗口大小動態更改圖像/ div尺寸？

Question

的終極目標（對我來說）是創建一個almsot完全像這個例子很簡單畫廊：

例： http://www.iheartdropdead.com/spring-summer-lookbook-2011.html

然而，這個畫廊是使用Flash製作，我想我的被造出來的HTML，CSS & JavaScript中，用於兼容性我想避免使用Flash。

我沒有問題使畫廊本身（圖像過渡到彼此），因爲我可以用這樣的：

freelancer-id.com/easy-gallery/2

我的主要我遇到的困難是填充頁面的方式。如果你看一下上面的例子並調整窗口的大小，你會發現它有兩個關鍵的東西。

1. 調整圖庫的寬度以適應窗口的寬度 1.1。一旦達到畫廊高度時，水平居中畫廊以適合窗口的高度
2. 垂直居中畫廊以適合窗口的高度 2.1一旦達到廊寬度，它垂直居中畫廊以適應寬度

   imgscale.kjmeath.com/

   這對於縮小大圖像的偉大工程：窗口

現在......我已經利用這片編碼的半完成的第一個目標適合包含Div的寬度。但是，它目前只在頁面加載時纔會執行，並且在調整窗口大小時不會更改。

我不知道如何：

*視Øn此窗口的大小動態調整的畫廊 *垂直/水平居中的div容器

內的圖像是否有人有任何建議或可能指向我對一些教程或插件可能會有所幫助，這將是偉大的。

如果有幫助，你中央社看看我所點擊這裏下載完成它：http://www.megaupload.com/?d=24CRQ46E

Answer 1

我多想你想可能通過精心設計的流體CSS佈局來完成的。然而，對於較爲複雜的東西，知道你可以使用jQuery的.resize()方法綁定到窗口resize事件，並相應地執行代碼。

Answer 2

你可以用媒體查詢做到這一點。人們已經開始稱這種「響應式」設計。您只需針對不同的分辨率使用不同的CSS表格。就像這樣：

<link rel="stylesheet" type="text/css" 
    media="screen and (max-device-width: 480px)" href="style.css" /> 

下面是解釋這多一點的文章：http://www.alistapart.com/articles/responsive-web-design/