即使在调整大小时，如何在页面中间填充图像？

Question

我已经在发帖之前到处搜索过*

我试图让两个图像在对方下面。每张图片精确地占据了一半的页面，而另一半则在其下面（2张不同的图片）。我试图寻找到处，但他们说把它作为背景，尽管背景你只能有1个图像。我也尝试改变宽度和高度，但在调整窗口大小时似乎不起作用。

有人可以给我一个提示，请问我该怎么办？

Answer 1

请尝试以下css你想覆盖一半的页面图像。这里是一个fiddle链接，这样你可以调整HTML输出，看它是否是你要的东西。

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