3

我正在尝试实现此处讨论的整页背景图像。

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

是图像大小的问题还是我有其他问题?

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

请不要使用 JavaScript 解决方案。我知道这可以通过 CSS 实现。

更新

包含在桌面网站上看起来不错,但在电话/桌子上看起来很糟糕。封面在手机/桌子上看起来不错,但在桌面上看起来很糟糕。我想我会使用在每台设备上看起来最好的那个?

更新

我想我可以全面使用包含,我只需要调整 bg 图像的大小,使其更薄以适合较小的设备。

4

2 回答 2

3

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

一种。使用背景尺寸:100% 100%;我可以使用此解决方案正确缩放图像。湾。使用高度和宽度为 100% 的 img 标签

于 2015-04-23T07:32:45.047 回答
2

更改background-size: coverbackground-size: contain

这样看起来很完美!

在此处输入图像描述

于 2013-05-19T13:30:50.987 回答