缩小窗口时会发生奇怪的事情

Question

练习响应式网络，在下面的代码中，在.container1 div 中，我插入了一个宽度：800 高度：698 像素的背景图像。我还相应地设置了.container1 div 的尺寸。但是，每当我尝试缩小窗口时，conatiner1（蓝色）和 container2 div（红色）之间都会出现巨大的垂直间隙。看起来无论何时缩小窗口，container2 div 都会向下移动，因此在两个 div 之间留下蓝色（container1 div 的背景颜色）间隙。我不知道为什么会这样？特别是当我将 container1 div 的尺寸设置为与图像大小完全相同时。

html, body {
    background-color: rgba(0,0,0,1);
    margin-top: 0px;
    margin-left: 0px;
    left: 0px;
    top: 0px;
    width: 100%;
}

.container1 {
    height: 698px;
    max-width: 800px;
    background-color: rgba(0,0,204,1);
    /* [disabled]float: left; */
    margin-left: auto;
    margin-right: auto;
    background-image: url(http://i1062.photobucket.com/albums/t482/gautam_official/VAIBHAV%20CINE%20MULTIPLEX%20VAISHALI%20NAGAR_zpsl0tdrevr.jpg);
    background-size: contain;
    position: relative;
    background-repeat: no-repeat;
}

.container2 {
    background-color: rgba(255,0,0,1);
    height: 250px;
    width: 500px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    left: 0px;
    top: 0px;
    margin-top: 0px;
}

<div class="container1">

</div>
<div class="container2">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis 
</div>

Answer 1

原因是：

background-size: contain;

背景图片必须包含在 div 中。

将图像缩放到最大尺寸，使其宽度和高度都可以容纳在内容区域内

尝试使用

 background-size: cover;

将背景图片缩放到尽可能大，使背景区域完全被背景图片覆盖。背景图像的某些部分可能不在背景定位区域内可见

或者如果你想覆盖整个 div 但不保持比例，请使用：

background-size: 100% 100%;

以父元素的百分比设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只给出一个值，则第二个设置为“auto”

    html, body {
    	background-color: rgba(0,0,0,1);
    	margin-top: 0px;
    	margin-left: 0px;
    	left: 0px;
    	top: 0px;
    	width: 100%;
    }

    .container1 {
    	height: 698px;
    	max-width: 800px;
    	background-color: rgba(0,0,204,1);
    	/* [disabled]float: left; */
    	margin-left: auto;
    	margin-right: auto;
    	background-image: url(http://i1062.photobucket.com/albums/t482/gautam_official/VAIBHAV%20CINE%20MULTIPLEX%20VAISHALI%20NAGAR_zpsl0tdrevr.jpg);
    	background-size: 100% 100%;
    	position: relative;
    	background-repeat: no-repeat;
    }

    .container2 {
    	background-color: rgba(255,0,0,1);
    	height: 250px;
    	width: 500px;
    	margin-right: auto;
    	margin-left: auto;
    	position: relative;
    	left: 0px;
    	top: 0px;
    	margin-top: 0px;
    }

    <div class="container1">

    </div>
    <div class="container2">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis 
    dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a 
    libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis 
    dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a 
    libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis 
    </div>