TheSixyOne.com如何按比例将图像拉伸到整页？

Question

我喜欢新的http://thesixtyone.com设计。我想知道他们如何按比例拉伸图像以适应整个背景？他们使用CSS / Javascript或其他技巧吗？

Answer 1

使用CSS和Javascript。
它需要更高的高度或宽度，将匹配的图像尺寸设置为，然后计算原始尺寸与新尺寸的比率，然后将该比率应用于相反的尺寸。

例如。说原始照片是100x100。如果你的屏幕是200x100;然后它拉伸第一个尺寸（200大于100）以适应。这是一个2：1的比例，所以它对另一个维度做同样的操作。生成的图像实际上是200x200。

添加更多代码以保持整个事物居中（因此出租人维度的屏幕外部分相等），并且瞧。

在我的示例中，图像将向上移动50，这样您就可以看到已经拉伸到200的图片的中间100（屏幕尺寸）。

图像实际上是一个设置了背景图像属性的DIV标记。

Answer 2

不确定他们使用的是哪个库但是在他们的javascript源代码中我搜索了“resize”并找到了：

Event.observe(window,"resize",t61.background.sync_size);

看起来他们正在将事件处理程序附加到window.onresize。