（对我来说）最终目标是创建一个非常简单的画廊，几乎与此示例完全相同：
EXAMPLE:
http://www.iheartdropdead.com/spring-summer-lookbook-2011.html 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/responsive-web-design/ http://www.alistapart.com/articles/responsive-web-design/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
