制作响应式时的背景图片问题

Question

我在使背景图像具有响应性方面遇到了一些麻烦。它在桌面上运行良好。

body {
            background:url(../Images/mountain.jpg) no-repeat;
            background-size:cover;           
        }

当我不关心响应性时，这很好，非常适合窗口。但， 当我使窗口变小时，宽度保持完美，但图像的高度正在缩小，并且我得到了尴尬的白色背景。

然后为了解决这个问题，我添加了这个，

height:100vh;

这很好，当我缩小时，我的图像高度与窗口完美对齐。尽管桌面和移动设备的图像也完美对齐，但当我缩小窗口时，我丢失了图像。它正在被裁剪。

我该怎么办？媒体查询是唯一的解决方案吗？除了使用不同图像的媒体查询，我还能做什么？

Answer 1

您可以使用 background-size 属性。其接受的值为：

• contain ：在其容器内尽可能大地缩放图像而不裁剪或拉伸图像
• cover ：尽可能大地缩放图像以填充容器，必要时拉伸图像

当然它不能延伸到容器之外（例如，如果 body 元素没有占据整个页面，您可能需要为此添加 min-height: 100vh;）