如何避免Swiper滑块中商品图片随文本换行而高度收缩？

• 屏幕高度变化时，Swiper滑块内的缩略图高度不一致；下方文本换行时，缩略图高度会收缩以适配容器内的文本。
• 要求图片保持响应式，不能设置固定高度，当前使用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;
}

解决方案 #

问题核心是flex布局下，缩略图区域未被设置为填充剩余空间，导致文本高度变化时挤压图片。通过以下CSS调整即可解决：

1. 修改flex布局的空间分配，让缩略图区域自动占满slide内除文本外的剩余高度：

.jiv-series .swiper-slide a{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    transition: .3s;
    height: 100%;
    text-align: center;
    justify-content: space-between; /* 新增：让文本和缩略图区域分布在容器两端 */
}

.series-thumbnail {
    flex: 1; /* 新增：让缩略图区域填充剩余高度 */
    width: 100%; /* 确保宽度铺满容器 */
    position: relative; /* 把定位属性移到父容器，避免图片层级问题 */
}

.series-thumbnail img{
    height: 100%;
    width: 100%; /* 新增：确保图片铺满容器 */
    object-fit: cover;
    position: static; /* 移除原有的relative，避免干扰父容器定位 */
}

2. 确认Swiper初始化配置中autoHeight为false（默认值即为false，若之前修改过需恢复），让滑块高度由内容决定，同时通过flex布局统一内部高度分配：

const swiper = new Swiper('.jiv-series', {
    // 其他配置项
    autoHeight: false,
    // ...
});

调整后，所有滑块的缩略图区域会自动填充剩余高度，文本换行时不会挤压图片，同时保持图片响应式，无需设置固定高度。

内容的提问来源于stack exchange，提问作者ygnsl