Html 如何使背景图片保持纵横比？

效果： 预期效果：

将图片打开到最大点，然后最小化浏览器

当浏览器变小（最小化）时，如何使整个背景图像调整大小？这是在“期望效果”中发生的，但在“效果”中，当我使用背景时，它不会调整大小

<header>
  <div class="image"></div>
<header>

html,body {
    height: 100%;
}
header {
    height: 100%;
    width: 100%;
}
.image {
    height: 100%;
    width: 100%;
    background: url("https://dl.dropboxusercontent.com/s/er5sypbyluenzco/Its%20ok.jpeg");
}

html，正文{
身高：100%；
}
标题{
身高：100%；
宽度：100%；
}
.形象{
身高：100%；
宽度：100%；
背景：url（“https://dl.dropboxusercontent.com/s/er5sypbyluenzco/Its%20ok.jpeg");
}

您可以通过设置背景大小来实现

.background {
    height: 100%;
    width: 100%;
    background: url("https://dl.dropboxusercontent.com/s/er5sypbyluenzco/Its%20ok.jpeg");
  background-size:100% 100%; /*this one*/

}

---

尝试使用背景大小属性。

@user7422199:不客气。。。请接受答案。。。背景尺寸：封面；是短一点的，以防封面。。图像的某些部分将被隐藏。请不要通过破坏您的帖子为其他人做更多的工作。通过在Stack Overflow上发布，您已经根据CC By-SA 4.0 Stack Overflow许可证授予了分发该内容的不可撤销的权利。根据堆栈溢出策略，任何故意破坏行为都将恢复。如果您想了解有关删除帖子的更多信息，请查看