Wie fülle ich ein Bild zur Hälfte durch die Seite, auch wenn ich die Größe ändere?

Question

Ich habe überall vor dem Posten dieser *

gesucht Ich versuche, zwei Bilder unter einander zu haben. Jedes Bild nimmt die halbe Seite genau und die andere Hälfte darunter (2 verschiedene Bilder). Ich habe versucht, überall hinzuschauen, aber sie sagen, es als Hintergrund zu behalten, obwohl Hintergrund nur 1 Bild haben kann. Ich habe auch versucht, die Breite und Höhe zu ändern, aber es scheint nicht zu funktionieren, wenn die Größe des Fensters geändert wird.

Kann mir jemand bitte einen Tipp geben, was ich tun soll?

Answer 1

Probieren Sie die folgenden css mit den Bildern, die Sie die halbe Seite abdecken möchten .. Hier ist ein fiddle Link, so dass Sie die Größe der HTML-Ausgabe ändern können, um zu sehen, ob es für was Sie gehen.

#img1 { 
 
    position: fixed; 
 
    width: 100vw; 
 
    height: 50vh; /* 50% of the view-height */ 
 
    top: 0%; 
 
    left: 0%; 
 
} 
 

 
#img2 { 
 
    position: fixed; 
 
    width: 100vw; 
 
    height: 50vh; /* 50% of the view-height */ 
 
    top: 50%; 
 
    left: 0%; 
 
}

<img id="img1" src="http://placehold.it/350x150"/> 
 
<img id="img2" src="http://placehold.it/350x150"/>

:

Answer 2

#m2 { 
 
    background-image: url('http://lorempixel.com/400/300/nature/'); 
 
    padding:20%; 
 
    margin-left: 16px; 
 
    margin-right: 16px; 
 
    background-size: cover; 
 
} 
 

 
#m3 { 
 
    background-image: url('http://lorempixel.com/400/300/sports/'); 
 
    padding:20%; 
 
    margin-left: 16px; 
 
    margin-right: 16px; 
 
    background-size: cover; 
 
}

<div id="m2"></div> 
 
<div id="m3"></div>

http://jsfiddle.net/rashivkp/ffevt4bg/