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

Question

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

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

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

人们以前用过什么优雅的解决方案来解决这个问题？我确信这是一个直截了当的问题，但我找到的唯一解决方案是令人费解和困惑的。

在技术方面，我正在使用来自 bootstrap 3 的网格和 Styled Components。

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>