seltsame Sache passiert, wenn Fenster verkleinert wird

Question

Practicing für responsive Web, im folgenden Code, in der .container1 div, habe ich ein Hintergrundbild der Breite eingefügt: 800 Höhe: 698 px. Ich habe auch die Abmessungen des Div entsprechend eingestellt. Jedoch, wenn ich versuche, das Fenster zu verkleinern, gibt es eine große vertikale Lücke, die zwischen dem conatiner1 (blau) und container2 div (rot) kommt. Es sieht so aus, als wenn das Fenster verkleinert wird, das container2 div bewegt sich nach unten und hinterlässt somit eine blaue Lücke (container1 div's Hintergrundfarbe) zwischen den beiden Divs. Ich weiß nicht, warum das passiert? Speziell wenn ich die Abmessungen von container1 div genau so eingestellt habe wie die Bildgröße.

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

Grund dafür ist:

background-size: contain; 

Hintergrundbild muss in div enthalten sein.

Maßstab das Bild auf die größte Größe, so dass sowohl seine Breite und Höhe in den Inhaltsbereich passen

try

background-size: cover; 

Maßstab das Hintergrundbild zu verwenden, um so groß wie möglich sein, damit der Hintergrundbereich vollständig vom Hintergrundbild abgedeckt wird. Einige Teile des Hintergrundbildes möglicherweise nicht in Sicht im Hintergrund Positionierbereich

oder wenn Sie abdecken wollen ganze div aber ohne Proportionen halten verwenden:

background-size: 100% 100%; 

Legt die Breite und Höhe des das Hintergrundbild in Prozent des Elternelements. Der erste Wert legt die Breite fest, der zweite Wert legt die Höhe fest. Wenn nur ein Wert angegeben ist, wird der zweite auf „auto“ gesetzt

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

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

 
    .container2 { 
 
    \t background-color: rgba(255,0,0,1); 
 
    \t height: 250px; 
 
    \t width: 500px; 
 
    \t margin-right: auto; 
 
    \t margin-left: auto; 
 
    \t position: relative; 
 
    \t left: 0px; 
 
    \t top: 0px; 
 
    \t 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>