我喜欢新的http://thesixtyone.com设计。我想知道他们是如何等比例拉伸图片以适应整个背景的？他们使用CSS / Javascript或其他技巧吗？
TheSixtyOne.com如何将图片等比例拉伸到整个页面？
9
- Phen
1
每次页面大小改变时，它们似乎都会将图像居中。 - Phen
2个回答
4
CSS和Javascript都被使用。它获取高度和宽度中的最大值，将匹配图片的尺寸设置为该值，然后计算原始尺寸与新尺寸的比率，然后将该比率应用于相对的尺寸。
例如：假设原始照片是100x100。如果您的屏幕是200x100，则它会将第一个尺寸（200大于100）拉伸以适应。这是2:1的比率，因此它对另一个尺寸进行相同的拉伸。结果图像实际上是200x200。
添加一些代码以使整个内容居中（使较小尺寸的屏幕外部分相等），然后就完成了。
在我的示例中，图像将向上移动50，以便您看到已拉伸为200的图片的中间100（屏幕尺寸）。
图像实际上是具有设置了背景图像属性的DIV标签。
例如：假设原始照片是100x100。如果您的屏幕是200x100，则它会将第一个尺寸（200大于100）拉伸以适应。这是2:1的比率，因此它对另一个尺寸进行相同的拉伸。结果图像实际上是200x200。
添加一些代码以使整个内容居中（使较小尺寸的屏幕外部分相等），然后就完成了。
在我的示例中，图像将向上移动50，以便您看到已拉伸为200的图片的中间100（屏幕尺寸）。
图像实际上是具有设置了背景图像属性的DIV标签。
- Chris S
1
不确定他们使用的是哪个库，但在他们的JavaScript源代码中搜索了“调整大小”，发现：
Event.observe(window,"resize",t61.background.sync_size);
看起来他们正在将事件处理程序附加到 window.onresize。
- slebetman
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接