做出响应时的背景图像问题答案

【问题标题】：Background image problem in while making responsive做出响应时的背景图像问题
【发布时间】：2021-08-29 00:38:14
【问题描述】：

我在使背景图像响应时遇到了一些问题。它在桌面上运行良好。

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

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

然后解决我添加了这个，

height:100vh;

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

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

【问题讨论】：

【解决方案1】：

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

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

【讨论】：