3列包含图片-底部在桌面上对齐，但未调整大小

Question

我正在使用三列布局，其中第一列和第三列中有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>

Here is jsfiddle too

Answer 1

您的示例图片高624和996像素。 624x3是不同于996x2的值。将图像加到相同的高度要比尝试使用CSS来移动图像容易得多。