Переменные изображения, выровненные снизу внутри карточек, в строках с использованием чистого CSS

Question

У меня есть контейнер с «карточками»: изображения выше с соответствующим текстом ниже.Такие вещи:

<div class = "cards">

  <div class = "card">
    <div class = "image-wrap">
      <img src= "image1.jpg" />
    </div>
    <div class = "text">
      Lorem ipsum
    </div>
  </div>

  <div class = "card">
    <div class = "image-wrap">
      <img src= "image2.jpg" />
    </div>
    <div class = "text">
      Lorem ipsum dolor sit
    </div>
  </div>

  <!-- snip -->

</div>

Теперь эти изображения имеют переменную высоту, и я хотел бы, чтобы они выравнивались по нижнему краю в каждой строке.Количество «карточек» в каждой строке будет варьироваться в зависимости от отзывчивой точки останова, поэтому таблицы здесь не будут работать.

Этот jsfiddle частично проходит там: https://jsfiddle.net/uf1d4nx6/4/

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

Я не хочу помещать изображения в отдельный контейнер с текстом в отдельный контейнер, поскольку он должен работать с отзывчивыми в каждом ряду будет различное количество «карточек» в зависимости от отзывчивой точки останова.

В идеале ищет решение для чистого CSS, чтобы после скачки js ничего не возникало, но я неконечно, если это возможно в настоящее время, используя чисто CSS.

.cards {
   grid-template-columns: calc(1/3*100% - 1/3*10px) calc(1/3*100% - 1/3*10px) calc(1/3*100% - 1/3*10px);
  grid-gap: 5px;
  margin: 0 auto;
  display: grid;
  width: 100%;
  background-color: #f1f1f1;
}

.card {
  border: 1px solid #ccc;
  padding: 5px;
}

.image-wrap,
.text {
  width: 100%;
}

.image-wrap {
  text-align: center;
}

<div class = "cards">

  <div class = "card">
    <div class = "image-wrap">
      <img src ="https://via.placeholder.com/90x40/fff.jpg"> 
    </div>
     <div class = "text">
      Lorem ipsum dolor sit amet
    </div>    
  </div>
  
  <div class = "card">
    <div class = "image-wrap">
      <img src ="https://via.placeholder.com/90x80/fff.jpg">
     </div>
    <div class = "text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>    
  </div>

  <div class = "card">
    <div class = "image-wrap">
      <img src ="https://via.placeholder.com/90x50/fff.jpg">
    </div>
    <div class = "text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>    
  </div>
  
  <div class = "card">
    <div class = "image-wrap">
      <img src ="https://via.placeholder.com/90x50/fff.jpg">
    </div>
    <div class = "text">
      Lorem ipsum dolor sit amet.
    </div>    
  </div>


</div>

Answer 1

Обратите внимание, что

высота будет высотой изображения с максимальной высотой. Если у вас действительно большое количество изображений), используйте jquery для установки этого свойства CSS.

.image-wrap, .text {height: 80px;}

оставленное поле будет составлять 50% (определяется в пикселях) от размера каждого изображения. Если у вас действительно есть изображения различной ширины), используйте jquery, чтобы установить это свойство CSS встроенным.

.image-wrap img {position: absolute; поле слева: -45px; внизу: 0;}

.cards {
   grid-template-columns: calc(1/3*100% - 1/3*10px) calc(1/3*100% - 1/3*10px) calc(1/3*100% - 1/3*10px);
  grid-gap: 5px;
  margin: 0 auto;
  display: grid;
  width: 100%;
  background-color: #f1f1f1;
}

.card {
  border: 1px solid #ccc;
  padding: 5px;
}

.image-wrap,
.text {
  width: 100%;
  height:80px;
}

.image-wrap {
  position:relative;
  text-align: center;
}

.image-wrap img {
  position:absolute;
  margin-left:-45px;
  bottom:0;
}

<div class = "cards">

  <div class = "card">
    <div class = "image-wrap">
      <img src ="https://via.placeholder.com/90x40/fff.jpg"> 
    </div>
     <div class = "text">
      Lorem ipsum dolor sit amet
    </div>    
  </div>
  
  <div class = "card">
    <div class = "image-wrap">
      <img src ="https://via.placeholder.com/90x80/fff.jpg">
     </div>
    <div class = "text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>    
  </div>

  <div class = "card">
    <div class = "image-wrap">
      <img src ="https://via.placeholder.com/90x50/fff.jpg">
    </div>
    <div class = "text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>    
  </div>
  
  <div class = "card">
    <div class = "image-wrap">
      <img src ="https://via.placeholder.com/90x50/fff.jpg">
    </div>
    <div class = "text">
      Lorem ipsum dolor sit amet.
    </div>    
  </div>


</div>