如何TheSixyOne.com比例图像伸展到整个页面？

Question

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

Answer 1

两个CSS和Javascript使用。
这需要高度或宽度中的较大者，设置匹配图像尺寸到，然后计算原始尺寸与新尺寸的比率，然后将该比率应用到相对尺寸。

例如。说原始照片是100x100。如果你的屏幕是200x100;那么它将第一个维度（200大于100）拉伸以适合。这是一个2：1的比例，所以它对另一个维度做了同样的调整。生成的图像实际上是200x200。

添加触摸更多的代码，以保持整个东西居中（所以出租人维度的屏幕外部分是相等的），瞧。

在我的例子中，图像会向上移动50，让你看到中间的100（屏幕尺寸）已被拉伸至200

画面的图像实际上是背景图像属性设置的DIV标签。

Answer 2

不知道they'e使用的是什么库，但在他们的JavaScript源我做了“调整”，并发现了一个搜索：

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

，它看起来像他们正在安装一个事件处理window.onresize。