我想创建一个填充整个背景的网页背景图像,而不会扭曲图像并改变它的比例。
你可以在 LaunchRock 的页面和他们的主页上看到一个很好的实现,例如.
我在 StackOverflow 上看到了这个问题,但是如果你玩弄它会产生什么,你会发现背景图像是 100% 的高度和 100% 的宽度,这意味着照片的原始比例没有保持并且图像被拉伸。
请注意,在 LaunchRock 示例中,如果您调整浏览器窗口的大小,图像会按比例增长并始终填满整个窗口(无论它们使用什么大小的窗口或背景图像)。
如果浏览器窗口不够宽,它会裁剪背景图像的两侧(保持图像居中并裁剪左右两侧),如果窗口不够高,它会裁剪背景图像的底部。
无论浏览器窗口大小,都保持图像的高宽比并填充整个背景。
我猜这不能用纯 CSS 完成,可能需要一些 JavaScript。有任何想法吗?
谢谢