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

Question

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

Answer 1

CSS 和Javascript 都被使用。
它采用高度或宽度中的较大者，将匹配的图像尺寸设置为该尺寸，然后计算原始尺寸与新尺寸的比率，然后将该比率应用于相反的尺寸。

例如。假设原始照片是 100x100。如果你的屏幕是200x100；然后它会拉伸第一个维度（200 大于 100）以适应。这是 2:1 的比率，因此它对其他维度进行相同的拉伸。生成的图像实际上是 200x200。

添加更多代码以保持整个事物居中（因此较小尺寸的屏幕外部分相等），瞧。

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

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