当屏幕的高度改变时，缩略图的高度在整个滑块中并不一致。当文本开始换行时，缩略图的高度开始收缩以适应容器中的文本。图像必须保持响应，并且没有固定的高度设置。我使用swiper-js创建滑块。
下面的例子作为一个屏幕截图来说明我的问题x1c 0d1x
这是我现在的代码，这是我试过的所有东西
超文本标记语言：

<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;
}

型