如何设置WooCommerce主图高度等于4张图库缩略图高度之和？

问题场景 #

搭建WooCommerce商品页面时，已将商品图库缩略图置于主图左侧，设置主图容器占父容器80%宽度、图库占20%宽度，但主图右侧出现裁剪问题——主图高度未匹配4张缩略图的总高度。需实现：

• 主图高度与4张缩略图总高度一致，避免裁剪
• 图库高度与主图同步，当缩略图数量超过4张时显示垂直滚动条

解决方案代码 #

替换原有CSS，通过Flex布局实现高度对齐并添加滚动逻辑：

/* 重构父容器为Flex布局，强制子元素高度一致 */
.et_pb_wc_images {
    display: flex;
    align-items: stretch;
}

/* 主图容器配置 */
.et_pb_wc_images .flex-viewport {
    width: 80%;
    height: 100%; /* 继承父容器高度，匹配缩略图总高 */
    object-fit: cover; /* 保证主图自适应容器，避免变形或裁剪异常 */
}

/* 缩略图容器配置 */
.flex-control-nav.flex-control-thumbs {
    width: 20%;
    margin-top: 0 !important;
    overflow-y: auto; /* 高度超出时显示垂直滚动条 */
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* 缩略图项样式重置 */
.woocommerce div.product div.images .flex-control-thumbs li {
    width: 100% !important;
    margin: 0 !important;
    flex-shrink: 0; /* 防止缩略图被压缩 */
}

/* 限制缩略图容器高度（匹配4张图总高度） */
.flex-control-nav.flex-control-thumbs {
    /* 示例：若单张缩略图固定高150px，总高设为600px；也可使用vh单位适配响应式 */
    max-height: 600px;
}

关键说明 #

1. Flex布局对齐：父容器.et_pb_wc_images启用Flex布局并设置align-items: stretch，强制主图与缩略图容器高度完全同步。
2. 主图自适应：主图容器设置height: 100%继承父容器高度，object-fit: cover确保图片在容器内合理显示，避免变形或过度裁剪。
3. 滚动控制：缩略图容器添加overflow-y: auto，配合max-height限制高度，超出4张缩略图时自动触发垂直滚动。
4. 默认样式清除：移除缩略图项的默认边距，保证布局紧凑对齐。

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