TheSixyOne.com 如何按比例将图像拉伸至整页？
我喜欢新的 http://thesixtyone.com 设计。我想知道他们如何按比例拉伸图像以适应整个背景？他们使用 CSS/Javascript 或其他技巧吗？
I love the new http://thesixtyone.com design. I am wondering how do they proportionally stretch the image to fit the whole background? Are they using CSS/Javascript or other tricks?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
CSS 和Javascript 都被使用。
它采用高度或宽度中的较大者，将匹配的图像尺寸设置为该尺寸，然后计算原始尺寸与新尺寸的比率，然后将该比率应用于相反的尺寸。
例如。假设原始照片是 100x100。如果你的屏幕是200x100；然后它会拉伸第一个维度（200 大于 100）以适应。这是 2:1 的比率，因此它对其他维度进行相同的拉伸。生成的图像实际上是 200x200。
添加更多代码以保持整个图像居中（因此较小尺寸的屏幕外部分相等），瞧。
In在我的示例中，图像将向上移动 50，以便您看到已拉伸到 200 的图片的中间 100（屏幕尺寸）。
该图像实际上是带有背景的 DIV 标记图像属性集。
Both CSS and Javascript are used.
It takes the greater of height or width, sets the matching image dimension to that, then calculates the ratio of original dimension to the new dimension, then applies that ratio to the opposing dimension.
For example. Say the original photo was 100x100. If your screen is 200x100; then it stretches the first dimension (200 is larger than 100) to fit. This is a 2:1 ratio, so it does the same streatch to the other dimension. The resulting image is actually 200x200.
Add a touch more code to keep the whole thing centered (so the off-screen portions of the lessor dimension are equal), and voila.
In my example, the image would be moved up 50, so that you see the middle 100 (the screen size) of the picture that has been stretched to 200.
The image is actually a DIV tag with the background image property set.
不确定他们使用的是什么库，但在他们的 javascript 源代码中我搜索了“resize”并发现：
看起来他们正在将事件处理程序附加到 window.onresize。
Not sure what library they'e using but in their javascript source I did a search for "resize" and found:
Which looks like they're attaching an event handler to window.onresize.