最终目标(对我来说)是创建一个非常简单的画廊,这个画廊就像这个例子一样:
示例: http://www.iheartdropdead.com/spring-summer-lookbook-2011.html
然而,这个画廊是使用Flash制作的,我希望我的HTML是由CSS,CSS& Javascript,为了兼容性,我想避免使用Flash。
我可以毫不费力地制作画廊(图像相互转换)因为我可以使用这样的东西:
freelancer-id.com/easy-gallery/2
我正在进行的主要斗争是填写页面我想要的方式。如果您查看上面的示例并调整窗口大小,您将看到它执行两项关键操作。
现在......利用这段编码,我已经完成了第一个目标:
imgscale.kjmeath.com /
这适用于缩小大图像以适合包含Div的宽度。但是,它当前仅在页面加载时执行,并且在您调整窗口大小时不会更改。
我不知道如何:
*根据窗口大小动态调整图库大小 *在容器div中垂直/水平居中图像
如果有人得到任何建议或者可以指向一些教程或插件,这可能会有所帮助。
如果它有帮助,你可以在这里下载它来看看我做了什么:http://www.megaupload.com/?d=24CRQ46E
答案 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() 方法绑定到窗口调整大小事件并相应地执行代码。