如何使视频轮播的视频缩略图高度匹配最后一张图片缩略图？

我来帮你搞定这个需求！要让轮播里的视频缩略图自动适配最后一张图片缩略图的高度，而且不改动那张图片的尺寸，咱们可以通过以下步骤实现：

核心思路 #

先获取最后一张图片加载完成后的真实高度，再把这个高度统一应用到所有视频缩略图上，同时保持视频缩略图的宽高比避免变形。

具体实现代码 #

结合你现有的代码，修改后的完整逻辑如下：

$(document).ready(function() {
  // 处理所有图片的加载状态（包括已缓存的图片）
  $(".chair-class").each(function() {
    // 如果图片已经加载完成，直接执行高度设置
    if (this.complete) {
      syncThumbnailHeights();
    } else {
      // 否则等待图片加载完成后再执行
      $(this).on('load', syncThumbnailHeights);
    }
  });

  function syncThumbnailHeights() {
    // 获取最后一张图片缩略图的高度（这是咱们的基准高度）
    const targetHeight = $(".chair-class:last").height();
    
    // 将基准高度应用到所有视频缩略图（替换成你实际的视频缩略图选择器）
    $("#thumbnails iframe").css({
      'height': `${targetHeight}px`,
      'width': 'auto', // 自动计算宽度，保持视频原比例
      'object-fit': 'cover' // 可选：让视频缩略图裁剪适配，避免拉伸变形
    });

    // 如果视频缩略图是放在容器里的，也可以给容器设置高度
    // $("#thumbnails .video-thumbnail-wrap").height(targetHeight);
  }
});

关键细节说明 #

• 必须等图片加载完成：如果直接在document.ready里获取高度，可能图片还没加载完，拿到的是错误的数值。上面的代码会处理已缓存和未缓存的图片，确保拿到真实的高度。
• 保持宽高比：设置width: auto可以让视频缩略图根据高度自动调整宽度，不会出现拉伸变形的情况。
• 可选的裁剪适配：如果视频和图片的比例不一样，object-fit: cover会让视频缩略图裁剪到合适的尺寸，填满容器同时保持画面比例，视觉效果更和谐。
• CSS辅助对齐：可以给所有缩略图容器加一点CSS，确保它们对齐整齐：

#thumbnails .thumbnail-item {
  display: inline-block;
  vertical-align: top;
  margin: 0 5px; /* 可选：加一点间距 */
}

这样处理后，所有视频缩略图就会自动匹配最后一张图片缩略图的高度，完全满足你的需求啦！

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