CSS背景图片要适合宽度，高度应按比例自动缩放

我遇到了同样的问题，在调整浏览器尺寸时无法调整图像大小。

错误代码：

html {  
  background-color: white;  
  background-image: url("example.png");  
  background-repeat: no-repeat;  
  background-attachment: scroll;  
  background-position: 0% 0%;
}

好代码：

html {  
  background-color: white;  
  background-image: url("example.png");  
  background-repeat: no-repeat;  
  background-attachment: scroll;  
  background-position: 0% 0%;
  background-size: contain;
}

这里的关键是添加此元素-> background-size：

这对我有用：

background-size: auto 100%;

只需添加这一行：

    .your-class {
        height: 100vh;
    }

vh是视口高度。这将自动缩放以适合设备的浏览器窗口。

在此处查看更多信息：将div设置为浏览器窗口高度的100％

背景图片未设置为完美，则他的css创建问题，因此他的css文件更改为以下代码

html {  
  background-image: url("example.png");  
  background-repeat: no-repeat;  
  background-position: 0% 0%;
  background-size: 100% 100%;
}

％; 背景大小：100％100％；”

尝试这个，

element.style {
    background: rgba(0, 0, 0, 0) url("img/shopping_bgImg.jpg") no-repeat scroll center center / cover;
}

我不确定您到底在寻找什么，但是您确实应该查看CSS-Tricks的Chris Coyier撰写的这些优秀博客文章：

http://css-tricks.com/how-to-resizeable-background-image/

http://css-tricks.com/perfect-full-page-background-image/

阅读每篇文章的描述，看看它们是否正是您所需要的。

第一个回答以下问题：

有没有办法使背景图像可调整大小？如图所示，无论浏览器窗口的大小如何，都用图像将网页的背景填满。另外，随着浏览器窗口的更改，将其大小调整为更大或更小。另外，请确保它保持其比例（不要拉伸怪异）。另外，不会引起滚动条，只是在需要时才垂直切掉。另外，作为内嵌标签进入页面。

第二篇文章的目标是获得以下内容：“网站上的背景图片始终覆盖整个浏览器窗口”。

希望这可以帮助。