将图像缩放为全视口高度而不切断部分图像

Question

所以我想要实现的是以下风格

基本上它是三张不同的照片

左边是大图片，右边是两张矩形图片。

我遇到的问题是，当你访问时，我需要这些填充100个视口，所以我把

.intro-deals{
  height: calc(100vh - 182px);
  overflow: hidden;
}

填充页面视图端口，但图像将被切断。看起来如下：

你可以看到图像如何在底部截止，最好的方法是什么？

以下是我的代码的主要部分

<div className="intro-deals">
  <div className="col-md-6 no-pad">
    <a href=""><img className="img-responsive" src={require('../images/home/header/Home_bannerMain.jpg')} alt=""/></a>
  </div>
  <div className="col-md-6 no-pad">
    <a href=""><img className="img-responsive" src={require('../images/home/header/Home_bannerSide1.jpg')} alt=""/></a>
    <a href=""><img className="img-responsive" src={require('../images/home/header/Home_bannerSide2.jpg')} alt=""/></a>
  </div>
</div>

CSS

.intro-deals{
  height: calc(100vh - 182px);
  overflow: hidden;
}

修改

同样是简化的Codepen（您必须以全屏模式查看）