адаптивная сетка изображений разных размеров с реальными пропорциями и масштабом

Question

У меня есть сайт laravel, который загружает изображения продуктов в грид-контейнер - подгоняет строку через цикл @foreach. Все изображения разных размеров, некоторые портретные, а некоторые пейзажные. Проблема заключается в том, что, поскольку контейнер сетки и элементы сетки реагируют (в процентах от ширины области просмотра), изображения масштабируются непоследовательно. Например, у меня есть изображения, которые в полном размере имеют размеры 3 x 2, 5 x 9 и 8 x 10. Когда они загружены в адаптивную сетку, все они в значительной степени масштабируются до 25% ширины порта просмотра. Результирующий «вид» изображений в сетке отображает изображения размером 5 x 9, которые больше, чем 8 x 10 изображений в масштабе. Искажение является более экстремальным, если вы рассматриваете портретные и пейзажные изображения одинакового размера. Например, 5 x 7 и 7 x 5. Пейзажные изображения масштабируются меньше, чем портретные, потому что все они пытаются заполнить строку в соответствии с фиксированной минимальной шириной пикселя.

Это можно легко исправитьструктурой таблицы, а не адаптивной сеткой, но это недопустимо!

вот цикл PHP

      <div class="product-grid-container grid-container--fit">
                    @foreach($products as $product)
                        <div class="grid-element">
                            <a href="/product/{!!$product->id !!}">
                                <img src="{{ asset($product->image) }}">
                            </a>
                        </div>
                    @endforeach
                </div>

и вот CSS

 .product-grid-container {
    display: grid;
    max-width: none;
}

.grid-container--fit {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}


.grid-element {
  padding: 5%;
  color: #fff;
  text-align: center;
}

.grid-element img {
  max-height: 300px;
  max-width: 300px;
  object-fit: contain;
}

Answer 1

Сетка

требует, чтобы охват каждого ряда или столбца был задан для каждого элемента, если вы не представляете, сколько строк или столбцов требуется каждому img для создания пэчворка, выиграл сетка (display + grid-template-columns) '

column-width из https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns может помочь:

Многостолбцовый макет CSS - это модуль CSS, который добавляет поддержку несколькихмакеты колонн. Включена поддержка для определения количества столбцов в макете, а также того, как содержимое должно перетекать из столбца в столбец, размеров промежутков между столбцами и разделительных линий столбцов (известных как правила столбцов) вместе с их внешним видом.

calc() также может помочь имитировать адаптивность, определяя размер столбцов.

Функция calc() CSS позволяет выполнять вычисления при указании значений свойств CSS. Может использоваться везде, где разрешено <length>, <frequency>, <angle>, <time>, <percentage>, <number> или <integer>.

Демониже или codepen для игры с

div {
  column-width:calc(100px + 10vw);/* mimic a bit minmax , tune to your needs */
  padding-left:2.5%;
  margin:0;
}
img { width:90%;
      margin:5% 0;
}

<h1> column css, resize window's width to check behavior</h1>
<div>
<img src="http://dummyimage.com/100">
<img src="http://dummyimage.com/100x200">
<img src="http://dummyimage.com/150x200">
<img src="http://dummyimage.com/100x250">
<img src="http://dummyimage.com/300x200">
<img src="http://dummyimage.com/350x200">
<img src="http://dummyimage.com/100x120">
<img src="http://dummyimage.com/100x280">
<img src="http://dummyimage.com/200x200">
<img src="http://dummyimage.com/170x200">
<img src="http://dummyimage.com/100x180">
<img src="http://dummyimage.com/150x200">
<img src="http://dummyimage.com/100x250">
<img src="http://dummyimage.com/300x200">
<img src="http://dummyimage.com/350x200">
<img src="http://dummyimage.com/100x120">
<img src="http://dummyimage.com/100x120">
<img src="http://dummyimage.com/100x280">
<img src="http://dummyimage.com/200x200">
<img src="http://dummyimage.com/170x200">
<img src="http://dummyimage.com/100x180">
<img src="http://dummyimage.com/150x200">
<img src="http://dummyimage.com/100x250">
</div>

Это может быть компромисс, иначе есть кладочный скрипт для того, что вы хотите сделать.

Answer 2

Это скорее проблема дизайна, чем кода. Сетка работает так, как задумано, но желаемый результат не является обычным. Flexbox будет в большей степени соответствовать тому, чего вы пытаетесь достичь, но другая проблема заключается в том, как масштабировать изображения, не ограничивая их, и при этом иметь надлежащий внешний вид. Пока вы заставляете max-height и / или max-width, изображения будут смещаться в другой масштаб в зависимости от их исходных пропорций. Для этого вам, вероятно, потребуется знать и / или контролировать размеры исходных изображений, чтобы они имели достаточно хорошую пропорцию между собой. Тогда вы могли бы сделать что-то вроде этого:

.product-grid-container {
  display:   flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
}

.grid-element {
  padding: 24px;
}

.grid-element img {
  max-width: 100%;
  object-fit: contain;
}

<div class="product-grid-container">

  <div class="grid-element">
    <img src="https://picsum.photos/400/200">
  </div>
  
  <div class="grid-element">
    <img src="https://picsum.photos/250/450">
  </div>

  <div class="grid-element">
    <img src="https://picsum.photos/400/500">
  </div>
  
  <div class="grid-element">
    <img src="https://picsum.photos/250/350">
  </div>

  <div class="grid-element">
    <img src="https://picsum.photos/450/250">
  </div>
</div>