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

Question

发帖前我到处搜索*

我正在尝试将两张图片放在一起。每张图片正好占页面的一半，另一半在页面下方（2 张不同的图片）。我试着到处找，但他们说保留它作为背景，虽然背景你只能有 1 张图像。我也尝试更改宽度和高度，但在调整 window 大小时似乎不起作用。

有人可以提示我应该做什么吗？

Answer 1

尝试以下 css 使用您想要覆盖半页的图像。这是 fiddle link 以便您可以调整 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/

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

How do I fill an image half way through page even when resizing?

html

css

image

visual-studio