Выравнивание изображения с адаптивными размерами и фиксированными полями px

Question

Я работаю на сайте, где мне предъявляют очень строгие требования к расстоянию. Одним из них является то, что между всеми изображениями должно быть поле размером 30 пикселей. Сами изображения могут быть адаптивными, но поля должны оставаться неизменными.

Проблема, с которой я столкнулся, показана ниже. По сути, у меня есть две колонки рядом. На одном изображены два квадратных изображения с промежутком в 30 пикселей посередине. В другом - одно высокое изображение с высотой, эквивалентной 2X, высота квадратного изображения + 30px (чтобы учесть разницу между двумя квадратами).

На большом экране, когда изображения имеют полный размер, это отображается правильно, однако на меньших экранах изображения сжимаются. В результате этого уменьшается + 30px, включенный в высокий размер изображения, чтобы соответствовать краю между квадратами. Однако поле между изображениями остается на уровне 30 пикселей, в результате в нижней части экрана появляется зазор, выравнивающий изображения.

Какие элегантные решения люди использовали для этой проблемы раньше? Я уверен, что это прямая проблема, но единственные решения, которые я нашел, являются запутанными и грязными.

С технической точки зрения я работаю с сеткой из начальной загрузки 3 и Styled Components.

Answer 1

Итак, я нашел достаточно удовлетворительное решение, что сохраняет изображения идеально выровненными и сохраняет поле независимо от размера экрана . Однако недостатком этого метода является то, что изображение не выровнено по центру внутри содержащего <TallImage> div, что означает, что истинный центр изображения смещен вправо .

I 'Я собираюсь оставить этот вопрос открытым, так как я бы приветствовал любые другие решения, которые кто-либо может предложить.Но для кого-то, кто ищет, мое решение ниже.

---

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>