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

因此，我试图实现以下风格

本质上是三张不同的照片

左边是大图片，右边是两个矩形图片

我遇到的问题是，当您访问时，我需要这些填充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>

编辑 还有一个简化的（您必须以全屏模式查看）

查看图片（在看到代码之前），我认为实现这一点的最佳方式是：

根据视口设置所有框的高度/宽度

使用图像作为div的背景，背景大小为：cover，背景位置为：center

---

就这样

标记为css，但显示SCS？我的坏@saj删除了SCS这两个对我来说都是可以接受的，这就是我想要表现的好！，如果你丢了一把小提琴或一个笔友，我会试试的，很多人也是others@saj设置缩小的代码笔：）图像的一部分将被裁剪，除非您不关心保持其自然尺寸/比例。

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