html – twitter.com的缩放背景图像是如何实现的?

html – twitter.com的缩放背景图像是如何实现的?,第1张

概述twitter.com有一个很好的缩放背景图像的实现. 这是如何实现的?它是否使用我自己可以使用的库/工具? 让我看到这一点的原因是我正在寻找一种在旧版浏览器中运行良好的解决方案,并且很容易实现轻量级要求. 我为你创造了一个与Twitter页面相同的小提琴. 要纠正上面的Talasan,您需要从代码中删除. display:none; 只是为了更清楚你的问题. Twitter不使用任何库或工具来实 twitter.com有一个很好的缩放背景图像的实现.

这是如何实现的?它是否使用我自己可以使用的库/工具?

让我看到这一点的原因是我正在寻找一种在旧版浏览器中运行良好的解决方案,并且很容易实现轻量级要求.

解决方法 我为你创造了一个与Twitter页面相同的小提琴.

要纠正上面的Talasan,您需要从代码中删除.

display:none;

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

Example

也只是为了澄清这一点,Twitter的背景图像不能扩展.无论您的浏览器的分辨率如何,它看起来都是一样的,但由于它们使用它们的方式,您会发现它实际上正在缩放.
见下图.

实际图像尺寸

1920 x 1018

1024 x 600

320 x 480(iPhone)

总结

以上是内存溢出为你收集整理的html – twitter.com的缩放背景图像是如何实现的?全部内容,希望文章能够帮你解决html – twitter.com的缩放背景图像是如何实现的?所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1067793.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-26
下一篇 2022-05-26

发表评论

登录后才能评论

评论列表(0条)

保存