html - 如何根据窗口大小优雅地缩放 div/背景图像以显示更多内容

Question

我正在尝试制作一个可以缩小以支持小型浏览器的页面，但要利用大多数访问者使用的大多数浏览器尺寸。

我有一张大于 1024x728 的背景图片，但图片的最重要部分包含在 1024x728 内...这就像杂志的出血 - 如果需要，那里还有额外的图片(如果完全展开，它看起来会更好) 但这不是必需的。

我举了一个例子来说明我的意思:

http://tinypic.com/r/24l5she/7

“背景图像”是较大浏览器窗口中的整个红色框，其中有一个重复的纹理(蓝色)。 “带有红色箭头的白框”是我要接受的“最小尺寸”。根据用户浏览器的大小，我正在尝试做的是剪切部分图像，直到浏览器达到某个特定的最小尺寸。

这可以在像 960.gs 这样的框架内完成吗？

非常期待您的回复!

干杯，

Answer 1

将您的页面放在固定宽度的包装器 div 中，然后将居中的背景图像添加到 body 标记。