CSS3背景大小“缩放”

Question

我正在尝试按照here所述实现整页背景图片。

我正在使用第一种方法，即CSS3技术。但是，当我像作者所建议的那样使用background-size: cover时，图像被“缩放”的方式比它需要的更远，我不明白为什么。

图像尺寸有问题还是我有其他错误？

Here是该页面的链接。 可以实现我希望看到整个树，树干和所有。我已经尝试将background-size设置为“100％自动”，效果是一样的。我也已经尝试background-size来“包含”，现在图像太小了。

请不要使用JavaScript解决方案。我只知道知道这是可以实现的。

更新

包含在桌面网站上看起来不错，但在手机/桌面上看起来很糟糕。封面在手机/桌面上看起来不错，但在桌面上却很糟糕。我想我会在每个设备上使用看起来最好的那个？

更新

我想我可以全面使用包含，我只需要将bg图像的大小调整为更小的设备。

Answer 1

我相信通过使用以下两个解决方案，我们可以满足这一要求：

一个。使用背景大小：100％100％;我可以使用此解决方案正确缩放图像。 湾使用高度和宽度为100％的img标记

Answer 2

将background-size: cover更改为background-size: contain

这样看起来很完美！