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

Question

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

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

在大屏幕上，当图像是完整尺寸时，它可以正确显示，但在较小的屏幕上，图像会缩小。因此，为匹配正方形之间的边距而包含在高图像尺寸中的 + 30 像素会减少。但是，图像之间的边距保持在 30 像素，这会导致底部出现间隙，从而使图像不对齐。

人们以前为这个问题使用过哪些优雅的解决方案？我确信这是一个直截了当的问题，但我发现的唯一解决方案是复杂且混乱的。

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

Answer 1

所以我找到了一个相当令人满意的解决方案，无论屏幕大小如何，都能保持图像完美对齐并保留边距。 但是，这种方法的一个缺点是图像在包含 <TallImage> 的 div 中没有居中对齐，这意味着图像的真正中心向右移动。

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

---

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>