CSS3背景大小“缩放”

我想实现一个完整的页面背景图像，如讨论here。CSS3背景大小“缩放”

我正在使用第一种方法，CSS3技术。然而，当我使用background-size: cover像作者所建议的那样，图像被“放大”得远远超出它的需要，我不明白为什么。

这是一个图像大小的问题还是我有其他问题？

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

请不要JavaScript解决方案。我知道只用CSS即可实现。

UPDATE

含看起来在桌面网站不错，但它看起来坏在电话/表。电话/桌面上的封面看起来不错，但在桌面上很糟糕。我想我会用每个设备上看起来最好的那个？

UPDATE

我想我可以用全线包含，我只需要调整背景图片为更小的设备更薄。

2013-05-19 arb

结帐我附上的截图，它在我的屏幕上看起来并不小。这取决于屏幕尺寸。 –

您可以使用不同背景的小设备，并使用媒体查询来检测它 –

变化background-size: cover到background-size: contain

它看起来完美的这种方式！

enter image description here

2013-05-19 13:30:50

它不适用于以前版本的ie – edd

@edd我不认为原始海报关心IE他反正使用'背景大小' –

它的css3问题。我的错 – edd

，我相信我们可以通过下面的两个解决方案就足够了这一要求：

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

2015-04-23 07:32:45

回答