半页图像与引导程序

Question

我想要两个图像，每个图像占据页面宽度的一半，整页（不滚动）的高度。如下图所示。图像应缩放（不拉伸）以填充空间，即使需要裁剪。

我在网上找不到有效的东西。图像始终延伸到容器的边界之外，或者无法正确缩放以适合它。

Answer 1

这样的东西？

＆＃13;

＆＃13;

html,
body{
  padding: 0;
  margin: 0;
}

img{
  max-width: 100%;
  height: auto;
}

.header{
  width: 100%;
  height: 100px;
  background: #eee;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content{
  height: calc(100vh - 100px);
  width: 100%;
  display: flex;
  align-items: center;
  text-align: center;
  background: #ddd;
  overflow: hidden;
}

.content > div{
  flex: 1;
  width: 100%;
}

＆＃13;

<div class="header">
<p>Header</p>
</div>
<div class="content">
  <div class="content-one">
  <img src="http://via.placeholder.com/1500x1500">
  </div>
   <div class="content-two">
   <img src="http://via.placeholder.com/1500x1500">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果没有Bootstrap，这将更容易实现，因为Bootstrap将在列之间添加装订线。一种方法是将图像设置为背景图像，然后使用background-size:contain;

html,body {
  height:100%;
  margin:0;
}

nav {
  height:100px;
  line-height:100px;
  background:#0080ff;
  color:#fff;
  font-size:40px;
  text-align:center;
}

.column {
  width:50%;
  height:100%;
  background-size:contain;
}
  .column.left {
    background-image:url(http://placehold.it/1000x800/ca6602/fff?text=Image+1);
    float:left;
  }
  .column.right {
    background-image:url(http://placehold.it/1000x800/e10227/fff?text=Image+2);
    float:right;
  }

<nav>Nav Bar</nav>
<div class="column left"></div>
<div class="column right"></div>