Загрузка изображений и отображение их в сетке с ограничением максимальной высоты

У меня есть несколько изображений, загруженных из базы данных, связанных статьями. Эти изображения имеют разную ширину и высоту (портрет/ландшафт). В одной статье может быть 1 или более изображений.

Если в 1 статье есть только одно изображение, то оно отображается в размере (ширина макс = 180мм). Если больше статей, я хочу показать их в сетке с ограничением по высоте.

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

В моем шаблоне на самом деле я сделал это... Он использует jquery для отображения картинки в портретном или альбомном виде. Если более одной картинки, я фиксирую ширину в свойствах html стиля напрямую без JQUERY.

ШАБЛОНЫ

<div class="col mb-5 text-center">
    {% if value|length == 1 %}
    <img class="img-responsive_jquery" src="/media/photos/{{ image }}.jpeg" />
    {% endif %}
    {% if value|length > 1 and value|length < 5 %}
    <img class="img-responsive" src="/media/photos/{{ image }}.jpeg" style="width:70mm !important" />
    {% endif %}
    {% if value|length > 5 and value|length < 10 %}
    <img class="img-responsive" src="/media/photos/{{ image }}.jpeg" style="width:40mm !important" />
    {% endif %}
</div>

И код JQUERY

$('.img-responsive_jquery').each(function() {
  var height_img = $(this).height();
  var width_img = $(this).width();
  console.log($(this), height_img);
 
  if(width_img > height_img) {
    $(this).css({
      width: '150mm'
    });
  } else {
    $(this).css({
      width: '80mm'
    });
  }
});

Это работает, но сетка не слишком сексуальна ... слишком много пустого.

Я пытался использовать grid-column / grid-rows, например, так : grid-column: 3 / 5; grid-row: 1 / 3; Но это работает только если я знаю, какую картинку я покажу первой, второй, третьей и т.д. ...

МОЯ ПОТРЕБНОСТЬ Если у кого-то есть решение ... показать изображение на одной странице после текста статьи без CROPING)

Вернуться на верх