Css 具有响应大小和固定像素边距的图像对齐

我在一个网站上工作，那里给了我非常严格的间距要求。其中之一是所有图像之间应该有30px的边距。图像本身可以响应，但边距必须保持不变

下面描述了我遇到的问题。基本上我有两列并排的。其中有两个正方形图像，中间有30px的间隙。另一种是单个高图像，其高度等于正方形图像高度的2X+30px（考虑两个正方形之间的边距）

在大屏幕上，当图像为其全尺寸时，这会正确显示，但在较小的屏幕上，图像会缩小。因此，与正方形之间的边距相匹配的高图像尺寸中包含的+30px减小。但是，图像之间的边距保持在30px，这会导致底部出现间隙，使图像无法对齐

人们以前对此问题使用过哪些优雅的解决方案？我相信这是一个直截了当的问题，但我找到的唯一解决办法是错综复杂的

技术方面，我正在使用Bootstrap3中的网格和样式化组件

---

因此，我找到了一个相当令人满意的解决方案，它可以使图像完全对齐，并保留边距，而不管屏幕大小如何。然而，这种方法的一个缺点是图像未在包含

div的区域内居中对齐，这意味着图像的真实中心向右移动

我将把这个问题留待讨论，因为我很乐意看到任何人能想出的任何其他解决方案。但对于正在寻找的人，我的解决方案如下

---

---

当屏幕尺寸变小到有这个问题时，可以考虑改变显示为块（使用<代码> @媒体< /代码>来评估屏幕大小）。这将使所有照片堆叠在一起，这是响应版面中的常见做法。举个例子，虽然照片大小都一样。谢谢Bob，我使用的是引导网格，图像分为两列，所以在移动和类似的情况下，所有内容都按照您的建议堆叠显示。不幸的是，这个问题发生在中间阶段，屏幕不够小，无法将所有内容都堆叠起来。为人们提供一个可运行的示例进行实验可能会很有用。医生告诉我怎么做。
import styled from 'styled-components';

const TallImage = styled.div`
  height: 0;
  margin: 0 0 30px;
  overflow: hidden;
  padding-top: calc(200% + 30px);
  position: relative;
  width: 100%;
  img {
    height: 100%;
    position: absolute;
    top: 0;
    width: auto;
  }
`;

<div className="row">
 <div className="col-sm-6">
  <SquareImage>
   <img src="..." alt="..." />
  </SquareImage>
  <SquareImage>
   <img src="..." alt="..." />
  </SquareImage>
 </div>
 <div className="col-sm-6">
  <TallImage>
   <img src="..." alt="..." />
  </TallImage>
 </div>
</div>