如何根据窗口大小动态更改图像/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() 方法绑定到窗口调整大小事件并相应地执行代码。