half page images with bootstrap - html

Question

I want two images each taking up half the page in width and the full page (without scrolling) in height. As illustrated in the image below. The images should be scaled (without stretching) to fill the space, even if that requires cropping.
I can't find anything online that works. The image always extends outside the bounds of a container or doesn't scale properly to fit it.

Answer 1

This would be easier to accomplish without Bootstrap since Bootstrap will add gutters between the columns. One way would be to set the images as background images and then use 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>

Answer 2

Something like this?
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%;
}
<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>