Tailwind+Preact视频播放列表缩略图致播放器高度异常求助

核心思路 #

用Tailwind的aspect-ratio插件锁死容器的宽高比，再配合object-fit控制缩略图的显示逻辑，最后通过容器的最大宽高限制适配不同屏幕，既不会拉伸变形，也不会撑爆页面。

具体操作 #

1. 给播放器容器加固定比例
   直接用Tailwind内置的aspect-video类（对应16:9的标准视频比例，要是你需要其他比例，自定义aspect-[4/3]这种就行），同时加w-full让容器占满父元素宽度，再补个max-w-4xl（或者你想要的最大宽度）限制桌面端的尺寸，避免太宽。

2. 处理缩略图的拉伸问题
   给缩略图元素加object-cover——这个类会让图片保持原有比例，裁剪超出容器的部分，刚好填满播放器区域；要是你想完整显示缩略图，就换成object-contain，不过容器会留空白（比例不一致的情况下）。

3. 删掉固定高度限制
   把之前的max-h-96去掉，换成max-h-full，让容器高度跟着比例自动计算。要是父容器是页面的一部分，记得给父容器加overflow-hidden，防止内容溢出。

示例代码 #

// 播放器容器
<div class="w-full max-w-4xl aspect-video mx-auto overflow-hidden">
  <!-- 视频缩略图 -->
  <img src="你的缩略图地址.jpg" alt="视频封面" class="w-full h-full object-cover" />
  <!-- 播放按钮可以绝对定位在上面 -->
  <button class="absolute inset-0 flex items-center justify-center bg-black/30">
    <svg class="w-16 h-16 text-white" viewBox="0 0 24 24" fill="currentColor">
      <path d="M8 5v14l11-7z" />
    </svg>
  </button>
</div>

移动端适配小技巧 #

要是移动端需要竖屏比例，直接用响应式类就行，比如md:aspect-video aspect-[9/16]——桌面端显示16:9，移动端自动切换成9:16，完美适配不同设备。

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