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

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: cover;

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

  

将图像缩放到最大尺寸，使其宽度和高度都适合内容区域

尝试使用

background-size: 100% 100%;

  

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

或者如果你想覆盖整个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: 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;
    }

  

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

＆＃13;

＆＃13;

    <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>

＆＃13;

@Bean
public CommonsMultipartResolver commonsMultipartResolver() {
    final CommonsMultipartResolver commonsMultipartResolver = new CommonsMultipartResolver();
    commonsMultipartResolver.setMaxUploadSize(-1);
    return commonsMultipartResolver;
}

@Bean
public FilterRegistrationBean multipartFilterRegistrationBean() {
    final MultipartFilter multipartFilter = new MultipartFilter();
    final FilterRegistrationBean filterRegistrationBean = new FilterRegistrationBean(multipartFilter);
    filterRegistrationBean.addInitParameter("multipartResolverBeanName", "commonsMultipartResolver");
    return filterRegistrationBean;
}

＆＃13;

＆＃13;

＆＃13;