如何防止底层文本开始换行时产品图片高度缩小？

问：

当屏幕高度发生变化时，缩略图图像的高度在整个滑块中不一致。每当文本开始换行时，缩略图的高度就会开始缩小以适合容器内的文本。图像必须保持响应，并且没有固定的高度设置。我正在使用 swiper-js 来创建我的滑块。

下面是示例作为屏幕截图来说明我的问题

这是我现在拥有的代码，这是我尝试过的一切

HTML格式：

<div class="swiper-slide" data-product="<?=$product->get_id();?>">
   <a href="<?=get_permalink($product_id)?>">
     <div class="series-thumbnail">
     <img src="<?=$thumbnail_src[0]?>" alt="<?=$alt?>">
     <button class="series-quick-view"><span><?=$settings['quick-view-text']?></span></button>
     </div>
     <div class="series-meta">
       <span class="jiv-product-name"><?=$product->get_title();?></span>
       <span class="jiv-product-price"><?=$product->get_price_html();?></span>
     </div>
   </a>
</div>

CSS：

/* SERIES */

.jiv-series .swiper-slide{
    height: auto;
}

.jiv-series .swiper-slide a{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    transition: .3s;
    height: 100%;
    text-align: center;
}

.jiv-series .swiper-slide:hover a{
    border: 1px solid #000;
}

.series-thumbnail, .series-thumbnail img{
    height: 100%;
    object-fit: cover;
    position: relative;
}

.series-thumbnail .series-quick-view{
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 20px;
    background: unset;
    border: unset;
    text-align: center;
    width: 100%;
    font-size: 12.274px;
    display: block;
}

.series-thumbnail .series-quick-view span{
    opacity: 0;
}

.jiv-series .swiper-slide:hover a .series-thumbnail .series-quick-view span{
    width: 100%;
    display: block;
    padding: 10px;
    background: #ffffff8a;
    transition: .3s;
    border: 1px solid #000;
    opacity: 1;
}