Image 垂直与水平-不寻常的网格

我有一个布局，我正在努力使其响应

图像之间有10px的间隔我的问题是使布局响应。由于浏览器试图在水平图像上保持比例，因此它不会以特定的大小保持底部边缘对齐

大的垂直图像是750像素乘以1200像素。小的是750px乘以595px，这是高度的一半减去间隙高度的一半

欢迎任何可能的解决方案或想法

试试这个（工作）

试试这个（工作）

---

你能发布一个实例或修改代码吗？你对twitter引导开放吗？你能发布一个实例或修改代码吗？你对twitter引导开放吗？

<div class="group">
  <div class="sm"></div>
  <div class="sm"></div>
</div>
<div class="lg"></div>

html {
    overflow-y: scroll;
    height: 100%;

    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

div {
  width: calc(50% - 5px);
  float: left;
}

.group {
  margin-right: 10px;
}

.sm {
  height: 200px;
  margin-bottom: 10px;
  width: 100%;
  background: green;
  border: 1px solid red;
}

.lg {
  height: calc(400px + 10px);
  background: green;
  border: 1px solid red;
}

@media screen and (max-width: 700px) {
  div {
    width: 100%;
  } 
}