javascript - 如何根据窗口大小动态更改图像/div 尺寸？

Question

最终目标(对我来说)是创建一个非常简单的画廊，几乎与这个例子完全一样:

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

但是，这个画廊是使用 Flash 制作的，我希望我的画廊由 HTML、CSS 和 Javascript 制作，为了兼容性我想避免使用 Flash。

我可以毫不费力地制作画廊本身(图像相互转换)，因为我可以使用这样的东西:

freelancer-id.com/easy-gallery/2

我遇到的主要困难是如何按照我想要的方式填充页面。如果您查看上面的示例并调整窗口大小，您会发现它做了 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/