HTML/CSS - 如何让背景适应任何窗口大小

Question

我需要帮助来使我的背景适当地显示。如果我使用全屏窗口，我希望整个图片都能够显示并且被拉伸。

这张图片比我的显示器要小，所以当我尝试拉伸它时，它只会放大。我将向您展示这张图片。

图片可以在这里查看： http://i.imgur.com/DDsTag7.jpg 目前我的代码（CSS）如下：

body {
   background-image:url(Ranger_with_Tusks_of_Killed_Elephant.jpg);
   background-size:100%;
   background-repeat:no-repeat;
   height: 100%;
   width: 100%;
}

我的屏幕分辨率是1920x1080，但背景图片被完全毁坏了。

无论屏幕尺寸如何，我该怎么做才能让它显示整张图片？最好只使用CSS。

只要窗口尺寸不超过图片的宽度/高度，我的代码就可以很好地工作。请自行尝试，它无法显示整张图片，而像是进行了缩放。

- aliazik

---

可能是CSS背景图像适合宽度，高度应按比例自动缩放的重复问题。 - Alex Angas

Answer 1

只需使用以下代码

html{
                background: url(Ranger_with_Tusks_of_Killed_Elephant.jpg) no-repeat center center fixed;
                -webkit-background-size: cover;
                -moz-background-size: cover;
                -o-background-size: cover;
                background-size: cover; 
                background-size: 100% 100%;

            }

- Fas M

Answer 2

我认为您要查找的是 background-size: cover;。此属性可用于设置背景图片的大小，以覆盖整个元素。

- sandyapplebum