Question

效果：https://codepen.io/anon/pen/YZvymg 期望的效果：https://codepen.io/anon/pen/RpJWXm

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

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

<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");
}

Answer 1

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

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

}

Answer 2

尝试使用background-size属性。

如何使背景图片保持宽高比？

2 个答案: