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

时间:2011-06-23 18:24:07

标签: javascript jquery html css

最终目标(对我来说)是创建一个非常简单的画廊,这个画廊就像这个例子一样:

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

然而,这个画廊是使用Flash制作的,我希望我的HTML是由CSS,CSS& Javascript,为了兼容性,我想避免使用Flash。

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

freelancer-id.com/easy-gallery/2

我正在进行的主要斗争是填写页面我想要的方式。如果您查看上面的示例并调整窗口大小,您将看到它执行两项关键操作。

  1. 调整图库的宽度以适合窗口的宽度 1.1。达到图库高度后,它会使图库水平居中以适应窗口的高度
  2. 将图库垂直居中以适合窗口的高度 2.1达到图库宽度后,它会垂直居中,以适应窗口的宽度
  3. 现在......利用这段编码,我已经完成了第一个目标:

    imgscale.kjmeath.com /

    这适用于缩小大图像以适合包含Div的宽度。但是,它当前仅在页面加载时执行,并且在您调整窗口大小时不会更改。

    我不知道如何:

    *根据窗口大小动态调整图库大小 *在容器div中垂直/水平居中图像

    如果有人得到任何建议或者可以指向一些教程或插件,这可能会有所帮助。

    如果它有帮助,你可以在这里下载它来看看我做了什么:http://www.megaupload.com/?d=24CRQ46E

2 个答案:

答案 0 :(得分:3)

您可以使用媒体查询执行此操作。人们已经开始称之为“响应式”设计。您只需为不同的分辨率使用不同的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/

答案 1 :(得分:2)

我认为您想要的很多东西都可以通过精心设计的流体css布局来实现。但是,对于更棘手的东西,知道你可以使用jQuery的 .resize() 方法绑定到窗口调整大小事件并相应地执行代码。