3 столбца с изображениями - выровнены по низу на рабочем столе, но не при изменении размера

Question

Я работаю над макетом из 3 столбцов, где в первом и третьем столбце находятся 3 изображения, а в среднем - 2 больших.

В основном это выглядит так:

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

.col-set {
  width: 100%;
  max-width: 1220px;
}

.col-set .col-4 {
  float: left;
  width: 30.5%;
  padding: 10px;
  box-sizing: border-box;
}

.col-set .col-4.middle-cat {
  width: 39%;
}

.col-set .col-4 a {
  font-size: 22px;
  color: #d80281;
  text-decoration: none;
  display: inline-block;
  width: 100%;
  text-align: center;
  margin-bottom: 20px;
}

.col-set .col-4 a:last-of-type {
  margin-bottom: 0;
}

.col-set a img {
  vertical-align: top;
  width: 100%;
  height: auto;
}

.col-set a strong {
  margin: 0;
  width: 100%;
  line-height: 35px;
  padding-top: 5px;
  display: block;
  background-color: #655c62;
  color: #ffffff;
  text-transform: uppercase;
  transition: ease all 500ms;
  font-size: 1rem;
}

<div class="col-set">
  <div class="col-4 left-cat">
    <a href="#"><img src="https://dummyimage.com/704x624/a0a922/000000&text=+" alt=""><strong>Product Category</strong></a>
    <a href="#"><img src="https://dummyimage.com/704x624/a0a922/000000&text=+" alt=""><strong>Product Category</strong></a>
    <a href="#"><img src="https://dummyimage.com/704x624/a0a922/000000&text=+" alt=""><strong>Product Category</strong></a>
  </div>
  <div class="col-4 middle-cat">
    <a href="#"> <img src="https://dummyimage.com/912x996/a30101/000000&text=+" alt=""><strong>Product Category</strong> </a>
    <a href="#"> <img src="https://dummyimage.com/912x996/a30101/000000&text=+" alt=""> <strong>Product Category</strong> </a>
  </div>
  <div class="col-4 right-cat">
    <a href="#"> <img src="https://dummyimage.com/704x624/a0a922/000000&text=+" alt=""> <strong>Product Category</strong> </a>
    <a href="#"> <img src="https://dummyimage.com/704x624/a0a922/000000&text=+" alt=""> <strong>Product Category</strong> </a>
    <a href="#"> <img src="https://dummyimage.com/704x624/a0a922/000000&text=+" alt=""> <strong>Product Category</strong> </a>
  </div>
</div>

Здесь тоже jsfiddle

Answer 1

Ваши примеры изображений имеют высоту 624 и 996 пикселей. 624x3 отличается от 996x2. Было бы проще, чтобы изображения складывались на одну и ту же высоту, а не пытались перемещать их с помощью CSS.