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

Question

最終目標（對我來說）是創建一個非常簡單的畫廊，這個畫廊就像這個例子一樣：

示例： 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的寬度。 但是它目前僅在頁面加載時執行，並且在調整窗口大小時不會更改。

我不知道怎么去：

*根據窗口大小動態調整圖庫大小*垂直/水平居中容器div內的圖像

如果有人有任何建議或可以指向我一些教程或插件，這可能有助於這將是偉大的。

Answer 1

您可以使用媒體查詢來完成。 人們已經開始稱之為“響應式”設計。 您只需為不同的分辨率使用不同的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/

Answer 2

我認為你想要的很多東西都可以通過精心設計的流體css布局來實現。 但是，對於更棘手的東西，知道你可以使用jQuery的.resize（）方法綁定到window resize事件並相應地執行代碼。