html - twitter.com 的缩放背景图片是如何实现的？

Question

twitter.com有一个很好的缩放背景图像的实现。

这是如何实施的？它使用我自己可以使用的库/工具吗？

让我看到这一点的原因是，我正在寻找一种在旧浏览器中运行良好且易于实现且要求不高的解决方案。

Answer 1

我为您创建了一个与 Twitter 页面相同的小提琴。

只是为了更正上面的 Talasan，您需要从代码中删除。

display:none;

只是为了更清楚你的问题。Twitter 不使用任何库或工具来实现这一点。他们正在做的是在屏幕中心设置一个固定位置的图像。为什么在我们调整浏览器窗口大小时图像没有调整大小？他们使用高分辨率图像并将其调整为 200% 的宽度和高度。这样，图像在几乎所有分辨率上看起来都一样，并且只会在非常小的分辨率上发生变化。

例子

也只是为了澄清这一点，Twitter 的背景图片没有缩放。无论您的浏览器的分辨率如何，它看起来都是一样的，但是由于它们使用的方式，您会误以为它实际上是在缩放。请参阅下面的图片。

实际图像尺寸

1920 x 1018

1024×600

320 x 480 (iPhone)

Answer 2

我不确定他们为什么要这样做，但他们使用的fixed是包含图像的 div 上的位置：

.front-bg {
    background: #000000;
    height: 200%;
    left: -50%;
    position: fixed;
    width: 200%;
}

然后在图像上，他们强迫它“适合”：

.front-bg img {
    bottom: 0;
    display: none;
    left: 0;
    margin: auto;
    min-height: 50%;
    min-width: 50%;
    right: 0;
    top: 0;
}

不过，您可能应该只使用 background-size 属性：https ://developer.mozilla.org/en-US/docs/Web/CSS/background-size