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

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

| 最终目标（对我而言）是创建一个非常简单的画廊，像下面的示例所示： 例： http://www.iheartdropdead.com/spring-summer-lookbook-2011.html 但是，这个图库是使用Flash制作的，我希望我的文档可以使用HTML，CSS和Javascript制作，出于兼容性考虑，我想避免使用Flash。 我可以轻松制作图库（图像相互转换），因为我可以使用以下方法： freelancer-id.com/easy-gallery/2 我目前的主要工作是按照自己的意愿填写页面。如果查看上面的示例并调整窗口大小，您将看到它做了2个关键的事情。 调整画廊的宽度以适合窗口的宽度 1.1。达到画廊高度后，它将水平居中对齐画廊以适合窗口的高度 将画廊垂直居中以适合窗口的高度 2.1达到画廊宽度后，它将垂直居中画廊以适合窗口的宽度 现在...通过使用这段代码，我已经完成了第一个目标： imgscale.kjmeath.com/ 这对于缩小大图像以适合包含Div的宽度非常有用。但是，当前仅在页面加载时执行此操作，而在调整窗口大小时不会更改。 我不知道怎么去： *根据窗口大小动态调整画廊的大小 *将图像垂直/水平居中放置在容器div中 如果有人有任何建议或可以向我介绍一些教程或插件，可能会有所帮助。     

解决方法

        您可以使用媒体查询来完成。人们已经开始称其为“响应式”设计。您将仅拥有用于不同分辨率的不同CSS工作表。像这样：

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

这是一篇对它有更多解释的文章：http://www.alistapart.com/articles/sensitive-web-design/     ,        我认为您可以通过设计良好的流畅CSS布局来完成很多工作。但是，对于棘手的事情，您知道可以使用jQuery的.resize（）方法绑定到窗口调整大小事件并相应地执行代码。