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

Question

练习响应式网页，在下面的代码中，在.container1 div中，我插入了一张width:800 height:698 px的背景图片。我还相应地设置了 .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 中。

Scale the image to the largest size such that both its width and its height can fit inside the content area

尝试使用

 background-size: cover;

Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area

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

background-size: 100% 100%;

Sets the width and height of the background image in percent of the parent element. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "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>