html - 将图像缩放为全视口(viewport)高度而不切除部分图像

Question

所以我要实现的是以下样式

本质上是三张不同的照片

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

我遇到的问题是当你访问时我需要这些来填充 100 个视口(viewport)所以我放了

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

它确实填充了页面 View 端口，但图像会被截断。看起来像下面这样:

您可以看到图像将如何在底部被截断，解决此问题的最佳方法是什么？

这也是我的代码的主要部分

<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 (您必须以全屏模式查看)

Answer 1

看图片(在看代码之前)，我认为实现这一目标的最佳镜头是:

1. 根据视口(viewport)设置所有框的高度/宽度
2. 使用图像作为 div 的背景，使用 background-size: cover 和 background-position: center center。

就是这样