html - 如何让背景图片保持纵横比？

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-size来实现

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

}